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?

Arunmozhi · Accepted Answer · 2020-01-03 09:49:31Z

7

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

answered Jan 3, 2020 at 9:49

Arunmozhi

9748 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ean Over a year ago

Thank you. I think I should avoid using event.keyCode, it's been deprecated.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related