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