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

问题描述

我正在 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>

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

解决方法

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

name

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

,

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