Vue：如何用 sinon spy 断言组件方法被调用

Question

我有一个单页组件：

<template>
  ...
  <button
    id="some-button"
    @click="clicked"
  >
    Button
  </button>
  ...
</template>
...
export default {
  name: 'MyComponent',
  ...
  methods: {
    fetchRequest: async function () {
    ...
    }
    clicked: async function () {
      ...

      this.fetchRequest()
    }
    ...

还有我的测试：

it('should fetch after clicking on that specific button', async () => {
  const spyFetchRequest = sinon.spy()

  wrapper = createWrapper(MyComponent, {
    provide() { return { repository: testRepository }},
    mocks: {
      fetchRequest: spyFetchRequest,
    },
  })

  await new Promise(resolve => setTimeout(resolve, 0))

  await wrapper.get('#some-button').trigger('click')

  expect(spyFetchRequest.calledOnce).to.be.true
})

但是我得到的是false：

AssertionError: expected false to be true
+ expected - actual

-false
+true

我在这里错过了什么？

Answer 1

mocks 挂载选项并非旨在模拟组件方法。这是为了模拟全局实例属性（例如，$router 或 $store）。

要模拟组件方法，请在组件定义的 methods 上使用 sinon.spy() 以及方法名称：

import MyComponent from '@/components/MyComponent.vue'

it('should fetch after clicking on that specific button', async () => {
  const spyFetchRequest = sinon.spy(MyComponent.methods, 'fetchRequest')

  const wrapper = shallowMount(MyComponent)

  ...

  expect(spyFetchRequest.calledOnce).to.be.true
})

demo