在 vue-test-utils 中的存根上使用键修饰符发出 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
    })
)

Emit keydown event with key modifier on a stub in vue-test-utils