userEvent.keyboard('{Escape}') not working in v14

[robinmetral]

Reproduction example

https://codesandbox.io/s/v14-userevent-keyboard-escape-14jq5t

Prerequisites

1. using @testing-library/user-event@13, create a test that does something when pressing '{Escape}' (e.g. close a dialog). v13 CodeSandbox
2. ✅ notice all tests pass
3. upgrade to v14. To migrate, make the tests async and await the userEvent.keyboard() call. v14 CodeSandbox
4. 🔴 notice the test using userEvent.keyboard() fails

Expected behavior

userEvent.keyboard('{Escape}') should still work in v14

Actual behavior

It doesn't—unless I'm missing something?

User-event version

14.2.0

[ph-fritsche]

react-modal relies on KeyboardEvent.keyCode.

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

We removed support for deprecated features, as we neither want to maintain features that nobody should use, nor want to encourage their usage.

See #842

You should file an issue with react-modal. Until they fix this, you can patch the event.
See #946 (comment)
See https://codesandbox.io/s/v14-userevent-keyboard-escape-forked-b9sxol?file=/src/App.test.js

[robinmetral]

Thanks for your super fast reply, @ph-fritsche!

Sorry I missed #946—didn't realize that the issue could be caused by how react-modal handles keyboard events. I'll see if I can raise it with maintainers over there. Thanks also for the ref to the patch workaround!

[robinmetral]

Note for posterity: this should be fixed in [email protected] (PR for reference: reactjs/react-modal#953)