微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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')

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。