vue.js - 在 vue-test-utils 中的 stub 上使用键修饰符发出 keydown 事件

Question

我有一个带有 .down 修饰符的 keydown 事件的自动 stub 子组件。我想在我的测试中触发这个事件。

component.vue 中的某处:

<child-component @keydown.down="myFn()" />

component.spec.js 中的某处:

 // I expect the keydown.down event to be triggered:
 wrapper.find({name: 'child-component'}).vm.$emit('keydown.down')

这行不通。我能够触发事件的唯一方法是删除修饰符 .down，或者向事件添加 .native 修饰符。很遗憾，我无法使用 .native 修饰符。

我尝试过的其他事情:

wrapper.find({name: 'child-component'}).trigger('keydown.down')

wrapper.find({name: 'child-component'}).vm.$emit('keydown', {keyCode: 40})

Answer 1

解决方案是提供一个 KeyboardEvent 作为 $emit 函数的第二个参数，以及键修饰符的 keyCode。所以如果我们想触发一个 keydown.down 事件，我们可以这样做:

wrapper.find({name: 'child-component'}).vm.$emit(
    'keydown', 
    new KeyboardEvent('keydown', {
        keyCode: 40
    })
)