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

Question

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

我相信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。

也欢迎其他解决方案。