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键触发键盘按下事件吗？

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触发

1 个答案: