onKeyDown charCode/keyCode/which is 0

[make-github-pseudonymous-again]

• @testing-library/user-event version: a5ca2e4
• Testing Framework and version: NA
• DOM Environment: NA

Problem description

Adding the following test to src/keyboard/keyboardAction.ts

test('trigger Synthetic `keydown` event for printable characters', async () => {
  const onKeyDown = jest.fn<unknown, [React.KeyboardEvent]>()
  render(<input onKeyDown={onKeyDown} />)
  screen.getByRole('textbox').focus()

  await userEvent.keyboard('a')
  expect(onKeyDown).toHaveBeenCalledTimes(1)
  expect(onKeyDown.mock.calls[0][0]).toHaveProperty('charCode', 65)

  await userEvent.keyboard('[Enter]')
  expect(onKeyDown).toHaveBeenCalledTimes(2)
  expect(onKeyDown.mock.calls[1][0]).toHaveProperty('charCode', 13)
})

yields the error

    trigger Synthetic `keydown` event for printable characters

    expect(received).toHaveProperty(path, value)

    Expected path: "charCode"

    Expected value: 65
    Received value: 0

      43 |   await userEvent.keyboard('a')
      44 |   expect(onKeyDown).toHaveBeenCalledTimes(1)
    > 45 |   expect(onKeyDown.mock.calls[0][0]).toHaveProperty('charCode', 65)
         |                                      ^
      46 |
      47 |   await userEvent.keyboard('[Enter]')
      48 |   expect(onKeyDown).toHaveBeenCalledTimes(2)

      at Object.<anonymous> (tests/react/keyboard.tsx:45:38)

Testing only [Enter] yields the same error. Found this while having trouble with my tests because UI relies on the charCode of keydown events. Expected?

The MDN docs on keyDown hint at the fact that codes should be present, but I do not know the specs. Missing implementation? I can help with providing a fix.

Suggested solution

Some patch was made to keypress to fix a similar issue (see 55e194a).
Similar patch should probably be made to keyup and keydown too, although the key mapping is not the same.

[ph-fritsche]

KeyboardEvent.keyCode is deprecated. You should use KeyboardEvent.code instead.

KeyboardEvent.charCode is non-standard and deprecated. You should use KeyboardEvent.key instead.

UIEvent.which is non-standard. You should use KeyboardEvent.key, KeyboardEvent.code or MouseEvent.button.

We removed support for deprecated features, as we neither want to maintain features that nobody should use, nor want to encourage their usage.
We only apply charCode on the keypress because the React implementation still relies on it and behaves differently if the value is 0. We will remove support for this when React updates their implementation.

[make-github-pseudonymous-again]

That's perfectly understandable. Thanks.

[coltanium13]

@ph-fritsche
Am i understanding it correctly that the KeyboardEvent.code for 'Enter' is still just keyboard('[Enter]'), that is the KeyboardEvent.code right?

What does it mean that you should use KeyboardEvent.code instead, does that mean use the keyboard('[Enter]') bracket syntax?

i also have this discussion question out:
#1164