使用Jest和Vue-utils测试Vue组件

Question

我正试图使用jest和vue-utils测试在vue中调用的组件，但它给出了低于的错误

expect(jest.fn()).toHaveBeenCalled()
Expected mock function to have been called, but it was not called.

RandomPhoneNumber component组件利用蚂蚁设计vue UI

<div>
<a-button
type="primary"
@click="generatePhone"
size="large"
class="btn-generate"
>Generate Phone Numbers</a-button>
</div>

我所做的低于

it('should call generatePhone', () => {
const wrapper = mount(RandomPhoneNumber, {
localVue,
sync: false
})
const spy = jest.fn()
wrapper.vm.generatePhone = spy
const button = wrapper.find('.btn-generate')
button.trigger('click')
expect(wrapper.vm.generatePhone).toHaveBeenCalled()
})

有人能分享更多关于这一点的信息吗？我在这里做错了什么。

Answer 1

如果没有组件代码，很难发现这一点。您的测试代码看起来不错，但是我以前从未使用过sync: true选项。

我有两个猜测：

1. 您应该通过CCD_ 3提供mock函数

类似：

cost generatePhone = jest.fn();
const wrapper = mount(RandomPhoneNumber, {
localVue,
sync: false,
methods: {
generatePhone,
}
})
const spy = jest.fn()
wrapper.vm.generatePhone = spy
const button = wrapper.find('.btn-generate')
button.trigger('click')
expect(generatePhone).toHaveBeenCalled()

请注意我对generatePhone的期望，而不是通过wrapper.vm访问它。我不知道为什么会发生这种情况，但在通过包装器访问时，我遇到了一些问题，无法断言笑话嘲笑

2. 除此之外，您可能需要等待呼叫

作为：

const generatePhone = jest.fn();
const wrapper = mount(RandomPhoneNumber, {
localVue,
sync: false,
methods: {
generatePhone,
}
})
const spy = jest.fn()
wrapper.vm.generatePhone = spy
const button = wrapper.find('.btn-generate')
button.trigger('click')
await Promise.resolve()
expect(generatePhone).toHaveBeenCalled()
done() // this have to be passed as the 'it' function handler as a parameter: https://jestjs.io/docs/en/asynchronous.html

我真的不确定第二个，但由于您将sync传递为false，您可能需要等待下一次调用该方法，我真的也不知道，因为这取决于Vue内部。

Answer 2

所以经过一系列的调试并尝试看看什么是有效的。调用wrapper.vm.method似乎没有更新。我所做的是调用generatePhone()，而不在它前面加上wrapper.vm。我不知道为什么wrapper.vm前缀不起作用。如果有人知道为什么的话，我认为这会很有帮助。

我如何解决

cost generatePhone = jest.fn();
const wrapper = mount(RandomPhoneNumber, {
localVue,
sync: false
})
generatePhone()
const button = wrapper.find('.btn-generate')
button.trigger('click')
expect(generatePhone).toHaveBeenCalled()

如果你想把一个参数传递给generatePhone，你可以像这样传递：

generatePhone(params)
const button = wrapper.find('.btn-generate')
button.trigger('click')
expect(generatePhone).toBeCalledWith(params)