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.