keydown - Vue Test Utils，测试中的 keyCode 不再触发 Keydown 事件

Question

在测试环境中，将vue-test-utils更新到1.0.0-beta.26或更高版本后，keydown事件不再由keyCode触发，例如:

Vue

  <div @keydown="onKeydown"></div>

脚本

  public onKeydown (event: KeyboardEvent) {
    if(event.keyCode === 13) {
      this.keyName = 'enter'
    } else if(event.keyCode === 67) {
      this.keyName = 'c'
    }
  }

之前的版本，都是以keyCode为参数测试PASS。

// version 1.0.0-beta.25
const wrapper = shallowMount(HelloWorld)
wrapper.find('div').trigger('keydown', { keyCode: 13 })
expect(wrapper.vm.keyName).toBe('enter') // PASS

wrapper.find('div').trigger('keydown', { keyCode: '67' })
expect(wrapper.vm.keyName).toBe('c')  // PASS

版本更新后，我的测试现在失败了。

尝试使用keydown.enter，它适用于enter键，但不适用于“c”键。

// version 1.0.0-beta.26
wrapper.find('div').trigger('keydown.enter')
expect(wrapper.vm.keyName).toBe('enter') // PASS

wrapper.find('div').trigger('keydown.c')
expect(wrapper.vm.keyName).toBe('c')  // FAILED

有什么建议如何使用 a-z 键触发 keydown 事件吗？

Answer 1

您应该将key作为选项传递。来自 official docs

it('Magic character "a" sets quantity to 13', () => {
    const wrapper = mount(QuantityComponent)

    wrapper.trigger('keydown', {
      key: 'a'
    })

    expect(wrapper.vm.quantity).toBe(13)
  })