Skip to content

How can I test `onKeyDown` prop in React with @testing-library/user-event version 14?

I am creating a list of menu items using React. I want to test that when a user clicks or presses enter on an item, the onSelect prop is called.

Here is a simplified version of my component:

import React from "react";

export const Item = ({ children, onSelect }) => {
  const onKeyDown = ({ keyCode }) => keyCode === 13 && onSelect();
  return (
    <div onClick={onSelect} onKeyDown={onKeyDown} tabIndex={0}>

Here is my test:

describe("Item", () => {
    it("calls onSelect when user clicks on the item or presses Enter", async () => {
      const user = userEvent.setup()
      const onSelect = jest.fn();
      const children = "Settings";
      render(<Item onSelect={onSelect}>{children}</Item>);

      const item = screen.getByText(children);

      await user.pointer({target: item, keys: '[Enter]'})

When running the tests I get the following output:

Item › calls onSelect when user clicks on the item or presses Enter


    Expected number of calls: 2
    Received number of calls: 1

      48 |
      49 |       await user.pointer({target: item, keys: '[Enter]'})
    > 50 |       expect(onSelect).toHaveBeenCalledTimes(2);
         |                        ^
      51 |     });
      52 |   });
      53 |

How can I test that onSelect was called when the user presses Enter on the item component?


The keyboard API allows to simulate interactions with a keyboard. It accepts a string describing the key actions.

await user.keyboard('[Enter]')

KeyboardEvent.keyCode is deprecated.
Therefore we don’t support it and encourage you to update your implementation to use non-deprecated features like KeyboardEvent.key or KeyboardEvent.code.