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

2024-05-21 • 问答

我有一个自动停顿的子组件，带有一个带有.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})

解决方案是提供KeyboardEvent作为$emit函数的第二个参数，并带有键修饰符的keyCode。因此，如果我们想触发keydown.down事件，可以这样进行：

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

本文链接：https://www.f2er.com/2948622.html