Question

我正在尝试使用jest和vue-utils测试在vue中被调用的组件，但是它给出了以下错误

expect(jest.fn()).toHaveBeenCalled()

 Expected mock function to have been called, but it was not called.

RandomPhoneNumber component该组件利用了ant-design-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选项。

我有两个猜测：

您应通过methods提供模拟功能，

喜欢：

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访问它。我不知道为什么会发生这种情况，但是在通过包装程序访问时，我在断言开玩笑的模拟时遇到了问题，

最重要的是，您可能需要等待通话，

为：

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传递为假，因此您可能需要等待下一个刻度，才能调用该方法，我真的不知道，因为这取决于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)

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

2 个答案: