Estoy creando una lista de elementos de menú usando React. Quiero probar que cuando un usuario hace clic o presiona Intro en un elemento, se llama al accesorio onSelect .

Aquí hay una versión simplificada de mi componente:

 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> ); };

Aquí está mi prueba:

 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); }); });

Al ejecutar las pruebas obtengo el siguiente resultado:

 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 |

¿Cómo puedo probar que se llamó onSelect cuando el usuario presiona Enter en el componente del elemento?