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

Question

在测试环境中，更新vue-test-utils至1.0.0-beta.26或以上版本后，keyCode不再触发keydown事件，示例：

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)
  })

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

Vue Test Utils, Keydown event no longer triggered by keyCode in test

keydown

vue-test-utils