vue.js - 使用 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 组件 该组件使用了 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 选项。

我有两个猜测:

1. 您应该通过方法提供模拟函数，

喜欢:

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 访问它。我不知道为什么会发生这种情况，但在通过包装器访问时，我在针对 jest mocks 断言时遇到了问题，

1. 最重要的是，您可能需要等待电话，

作为:

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 内部结构。