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

user_3005550 0
Viewed 1211

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?

babel-jest vuejs2 jestjs unit-testing
2 Answers

The docs haven't been updated. I found a open issue and opened a PR. From the docs:

name

Asserting against name encourages testing implementation details, which is a bad practice. If you need this feature, though, you can use vm.$options.name for Vue components or element.tagName for DOM nodes. Again, consider if you really need this test - it's likely you don't.

user_16289840

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')
user_116039610
Related