This content originally appeared on DEV Community and was authored by Kazutora Hattori
Introduction
While writing tests using React Testing Library, I found myself a bit unsure about “how to locate elements?” so I'm summarizing the methods I use frequently.
fireEvent
fireEvent.click(button);
fireEvent.change(input, { target: { value: “abc” } });
A method to directly trigger DOM events.
While simple, it can sometimes behave slightly differently from actual user interactions.
- Useful when you just want to verify the bare minimum event firing.
userEvent
await userEvent.type(input, “Hello”);
await userEvent.click(button);
Simulation closer to actual user actions.
Can reproduce keyboard input and mouse clicks with a “human-like” feel.
- Recommended to prioritize this method when possible.
Summary
fireEvent
→ When you want to simply trigger events directly
userEvent
→ When you want to test behavior closer to actual user actions
This content originally appeared on DEV Community and was authored by Kazutora Hattori
Kazutora Hattori | Sciencx (2025-09-17T08:03:26+00:00) A Summary of User Interactions in React Testing Library (fireEvent / userEvent). Retrieved from https://www.scien.cx/2025/09/17/a-summary-of-user-interactions-in-react-testing-library-fireevent-userevent/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.