Question

我正在尝试测试我的 Vue 组件的 methods；测试似乎工作正常。但问题是它在控制台中给出了折旧警告。

我相信 vue-test-utils 团队会在下一个主要版本中删除 setMethods 和 methods 属性。

我的问题是没有其他方法可以实现为 setMethods 和 methods property 提供的相同内容。

只是他们提出了警告：

To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

我的问题：我们如何提取方法并测试从组件级别单击的方法的功能？

下面是我的简单示例，我模拟了一个方法并检查它是否在触发点击时在组件内部被调用。

const downloadStub = jest.fn()
const wrapper = mount(Documents, {
  methods: { downloadNow: downloadStub },
})
it('check download button clicked and calling downloadNow method', () => {
  wrapper.find('.download-button').trigger('click')
  expect(downloadStub).toBeCalled()
})

注意： 运行上述代码没有问题；我想知道达到相同结果并避免警告的替代方法？

Answer 1

经过一番研究，我找到了一种按我预期的方式工作的解决方案。我能够在不使用任何 methods 属性和 setMethods 的情况下实现这一点。

这样，我就去掉了警告信息 methods property is deprecated and will be removed。

const wrapper = mount(Documents, {
})
it('check download button clicked and calling downloadNow method', () => {
  const downloadSpy = jest.spyOn(wrapper.vm, 'downloadNow')
  wrapper.find('.download-button').trigger('click')
  expect(downloadSpy).toBeCalled()
})

我使用 jest.spyOn 方法并传递 wrapper.vm 和 method name。

也欢迎其他解决方案。

[vue-test-utils]：不推荐通过`methods` 属性或setMethods 覆盖方法

1 个答案: