时间戳

首页 > 解决方案 > 在 vue-test-utils 中的存根上使用 key 修饰符发出 keydown 事件

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

问题描述

我有一个带有.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})

标签： vue.jsvue-test-utils

解决方案

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

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

推荐阅读