如何让Sinon Spy捕获Vue组件事件回调中方法的调用？

你遇到的这个问题很典型——核心原因是Vue组件初始化时，事件监听绑定的是原始方法的引用，而你之后在实例上spy的方法，只是替换了实例属性，并没有改变事件监听里早已保存的那个引用。所以触发事件时，实际调用的还是最初的方法，你的spy自然捕捉不到。

下面给你两种可行的解决思路：

方法一：挂载组件前就替换方法为Spy #

这是最直接的方式，在组件挂载时就把目标方法替换成Sinon Spy，这样事件触发时调用的就是这个Spy本身：

import { mount } from '@vue/test-utils';
import sinon from 'sinon';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('triggers testfn when testevt is emitted', () => {
    // 创建Spy并替换组件的testfn方法
    const testfnSpy = sinon.spy();
    const wrapper = mount(MyComponent, {
      methods: {
        testfn: testfnSpy
      }
    });

    // 触发事件
    wrapper.vm.$emit('testevt');
    // 断言Spy被调用
    expect(testfnSpy.called).to.be.true;
  });
});

这种方式的好处是简单直接，完全避免了引用不一致的问题。

方法二：保留原方法逻辑的同时Spy它 #

如果你需要保留原方法的业务逻辑，只是想检测它是否被调用，可以用Sinon的callsFake来包装原方法：

import { mount } from '@vue/test-utils';
import sinon from 'sinon';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('triggers testfn when testevt is emitted', () => {
    const wrapper = mount(MyComponent);
    // 保存原方法的引用
    const originalTestfn = wrapper.vm.testfn;
    // Spy实例上的方法，同时调用原方法逻辑
    const testfnSpy = sinon.spy(wrapper.vm, 'testfn').callsFake(originalTestfn);

    // 触发事件
    wrapper.vm.$emit('testevt');
    // 断言Spy被调用
    expect(testfnSpy.called).to.be.true;

    // 测试结束后恢复原方法，避免影响其他测试用例
    testfnSpy.restore();
  });
});

额外说明 #

为什么你直接调用wrapper.vm.testfn()时Spy能生效？因为此时你调用的是已经被Spy包装后的实例属性，而事件触发时调用的是组件初始化阶段就绑定到事件监听里的原始方法引用——这两者不是同一个引用，所以出现了方法执行但Spy没记录的情况。

如果你的组件是用箭头函数绑定事件的（比如this.$on('testevt', () => this.testfn())），那原来的Spy方式其实也能生效，因为箭头函数每次都会去实例上取当前的testfn方法，而不是保存固定引用。不过这种写法在Vue里并不推荐，还是建议用上面两种通用方案。

内容的提问来源于stack exchange，提问作者Andrei Pambuccian