unit testing - Jest [vue-test-utils]: name is deprecated and will be removed in the next major version

Question

I'm writing a Jest test file within Vue and i'm receiving the following warning:

[vue-test-utils]: name is deprecated and will be removed in the next major version. (https://vue-test-utils.vuejs.org/api/wrapper/name.html)

My test should check if certain properties are rendered:

describe("Stock", () => {
  it("should render correct symbol, name and quantity", () => {
    const stock = {
      name: "Apple",
      price: 220,
      quantity: 5
    };
    const wrapper = mount(Stock, {
      propsData: {
        stock
      }
    });
    const name = wrapper.find("[data-testid='stock-name']");
    expect(name.text()).toEqual(stock.name);
  });
})

My HTML:

<h3 class="card-title">
  <span data-testid="stock-name">
     {{ stock.name }}
  </span>
</h3>

How can I solve this warning? Or what is another way to test if a certain element contains a certain prop?

question from:https://stackoverflow.com/questions/66059451/jest-vue-test-utils-name-is-deprecated-and-will-be-removed-in-the-next-major

Answer 1

For your exact usage you can use: props

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo, {
  propsData: {
    bar: 'baz'
  }
})
expect(wrapper.props().bar).toBe('baz')
expect(wrapper.props('bar')).toBe('baz')