在 vue-test-utils 中的存根上使用 key 修饰符发出 keydown 事件

Question

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

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
    })
)