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 ponent:

import React from "react";

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

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.click(item);
      expect(onSelect).toHaveBeenCalledTimes(1);

      await user.pointer({target: item, keys: '[Enter]'})
      expect(onSelect).toHaveBeenCalledTimes(2);
    });
  });

When running the tests I get the following output:

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

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    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 ponent?

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 ponent:

import React from "react";

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

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.click(item);
      expect(onSelect).toHaveBeenCalledTimes(1);

      await user.pointer({target: item, keys: '[Enter]'})
      expect(onSelect).toHaveBeenCalledTimes(2);
    });
  });

When running the tests I get the following output:

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

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    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 ponent?

• javascript
• reactjs
• react-testing-library

2 Answers 2

From documentation

fireEvent.keyDown(domNode, {key: 'Enter', code: 'Enter', charCode: 13})

fireEvent.keyDown(domNode, {key: 'A', code: 'KeyA'})

https://testing-library./docs/user-event/keyboard

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.

https://codesandbox.io/s/crazy-snyder-gurptu?file=/src/Item.test.js