Vue中使用sinon spy断言组件方法被调用失败该如何解决？

开发者阿泽

2026-10-2

你配置的mocks项无法替换组件自身定义的methods方法，这是断言失败的根本原因。

Vue测试工具的mocks配置仅用来注入挂载到Vue实例原型链上的全局属性（比如$router、$t这类全局API），你写在mocks里的fetchRequest实际上会被注入为this.$fetchRequest，并不会覆盖组件自身声明的this.fetchRequest方法，所以点击按钮后调用的还是原组件的方法，你的spy自然不会被触发。

解决方法

方案1：挂载后手动替换实例方法

调整测试代码，在组件挂载完成后手动替换实例上的fetchRequest方法为spy：

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

  wrapper = createWrapper(MyComponent, {
    provide() { return { repository: testRepository }}
    // 移除mocks里的fetchRequest配置
  })

  // 手动替换实例方法为spy
  wrapper.vm.fetchRequest = spyFetchRequest
  // 等待实例更新完成
  await wrapper.vm.$nextTick()

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

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

方案2：挂载时直接覆盖methods配置

使用测试工具挂载选项的methods配置直接替换组件原有方法：

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

  wrapper = createWrapper(MyComponent, {
    provide() { return { repository: testRepository }},
    // 直接用methods配置覆盖原组件方法
    methods: {
      fetchRequest: spyFetchRequest
    }
  })

  await wrapper.get('#some-button').trigger('click')
  expect(spyFetchRequest.calledOnce).to.be.true
})