Actualmente estoy aprendiendo React-Testing-Library.
Me gustaría probar la interacción del mouse con un elemento. Actualmente, no me queda claro la diferencia entre userEvent.click (elemento) y fireEvent.click (elemento). ¿Se recomienda el uso de ambos y, en el siguiente ejemplo, se implementan correctamente?
const mockFunction = jest.fn(() => console.info('button clicked')); const { getByTestId } = render(<MyAwesomeButton onClick={mockFunction} />); const myAwesomeButton = getByTestId('my-awesome-button'); // Solution A fireEvent(myAwesomeButton) expect(mockFunction.toHaveBeenCalledTimes(1); // Solution B userEvent.click(myAwesomeButton); expect(mockFunction).toHaveBeenCalledTimes(1);
Gracias de antemano por cualquier claridad.
Detrás de escena, userEvent
usa fireEvent
. Puede considerar que fireEvent
es la API de bajo nivel, mientras que userEvent
establece un flujo de acciones.
Aquí está el código para userEvent.click
Puede ver que, según el elemento en el que intente hacer clic, userEvent
realizará un conjunto de acciones diferentes (por ejemplo, si es una etiqueta o una casilla de verificación).
De acuerdo con Docs , debe usar user-event
para probar la interacción con sus componentes.
fireEvent
envía exactamente los eventos que le indicas y solo esos, incluso si esos eventos exactos nunca se han enviado en una interacción real en un navegador.
User-event
por otro lado, distribuye los eventos como sucederían si un usuario interactuara con el documento. Eso podría conducir a los mismos eventos que envió anteriormente por fireEvent
directamente, pero también podría detectar errores que hagan imposible que un usuario active dichos eventos.