vuejs2之Sinon如何窥探Vue事件触发的Vue组件方法

我为描述我的问题所做的基本设置:

使用 vue-cli 2.8.2，我基于 webpack 模板(vue init webpack vue-test-sinon-spy)生成了一个新项目，保留了 vue-cli 的所有默认值(除了禁用 eslint 的无关异常(exception))。

在这个 vue-cli 生成的项目中所做的更改:

我在 Hello.vue 的 h2 标签上附加了一个事件:

<h2 @click="sayHello">Essential Links</h2> 

我在 Hello 组件中添加了一个方法

<script> 
export default { 
  ... 
  methods: { 
    sayHello() { 
      console.log('hello!') 
    } 
  } 
} 
</script> 

我在 Hello.spec.js

中添加了一个新测试

describe('Hello.vue', () => { 
  // ... 
 
  it('should handle click on h2 tag', () => { 
    const Constructor = Vue.extend(Hello) 
    const vm = new Constructor().$mount() 
    sinon.spy(vm, 'sayHello') 
 
    // [A] if I run the line below, vm.sayHello.callCount will be 0 - not as expected 
    vm.$el.querySelector('h2').click() 
 
    // [B] if I run the line below, vm.sayHello.callCount will be 1 - as expected 
    // vm.sayHello() 
 
    // vm.sayHello.callCount will be 0 or 1, depending on 
    //    what line I execute ([A] or [B]), 
    //    even if in both cases sayHello method is really executed 
    console.log('###', vm.sayHello.callCount) 
  }) 
}) 

当我以编程方式单击 html 标记(使用 vm.$el.querySelector('h2').click() )时，spy 不会捕获方法 sayHello 的执行。 ，因此 vm.sayHello.callCount将是 0。不是我喜欢的。

但是，如果我直接调用 sayHello (使用 vm.sayHello() )， vm.sayHello.callCount将是 1。正如我所料。

如何让 spy 捕获 sayHello 的调用(所以 vm.sayHello.callCount 将为 1)，如果我想模拟点击 html 标签( vm.$el.querySelector('h2').click() )，而不是直接调用 sayHello (没有 vm.sayHello() )？

谢谢

请您参考如下方法:

这里的问题是当组件被挂载时回调被绑定(bind)到事件。我不确定它在后台是如何工作的，但它就像 sayHello 的副本点击事件范围内的方法。绑定(bind)后不能修改。

之后，您将在 components 方法上创建 spy 。他们的行为相同，但事实并非如此。一个是 spy ，一个不是。
wrapper.vm.sayHello()执行方法(被监视)wrapper.find('h2').trigger('click')执行回调(不监视)

在安装之前在组件类上创建 spy 而不是之后的实例，它应该按预期工作。

it('should handle click on h2 tag - vue-test-utils + dummy click version', () =>     { 
    const clickSpy = sinon.spy(Hello.methods, 'sayHello') 
    const wrapper = mount(Hello) 
    ... 
})