Jest [vue-test-utils]：名称已弃用，将在下一个主要版本中删除答案

【问题标题】：Jest [vue-test-utils]: name is deprecated and will be removed in the next major versionJest [vue-test-utils]：名称已弃用，将在下一个主要版本中删除
【发布时间】：2021-05-09 13:40:08
【问题描述】：

我正在 Vue 中编写一个 Jest 测试文件，我收到以下警告：

[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)

我的测试应该检查某些属性是否被渲染：

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);
  });
})

我的 HTML：

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

我该如何解决这个警告？或者还有什么方法可以测试某个元素是否包含某个道具？

【问题讨论】：

我认为这是误报；您的代码似乎没有使用 name 方法。

标签： unit-testing vuejs2 jestjs babel-jest

【解决方案1】：

文档尚未更新。我找到了a open issue 并开了一个PR。来自the docs：

`name`

反对name 鼓励测试实现细节，这是一种不好的做法。但是，如果您需要此功能，您可以将 vm.$options.name 用于 Vue 组件或使用 element.tagName 用于 DOM 节点。再次考虑一下您是否真的需要此测试 - 很可能您不需要。

【讨论】：

【解决方案2】：

对于您的具体用法，您可以使用：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')

【讨论】：