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}> {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 component?
Advertisement
Answer
https://testing-library.com/docs/user-event/keyboard
The
keyboard
API allows to simulate interactions with a keyboard. It accepts astring
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