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

Question

In test environment, keydown event no longer triggered by keyCode after updated vue-test-utils to version 1.0.0-beta.26 or above, example:

Vue

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

Scripts

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

Previous version, all test PASS with keyCode as parameter.

// 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

After version updated, my test now FAILED.

Tried use keydown.enter, it work for enter key but doesn't work for 'c' key.

// 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

Any suggestion how to trigger keydown event with a-z key?

Answer 1

You should pass key as an option. From the 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)
  })