在 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

解决方案是提供 aKeyboardEvent作为函数的第二个参数$emit，并使用keyCodekey 修饰符。因此，如果我们想触发一个keydown.down事件，我们可以这样做：

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