A Summary of User Interactions in React Testing Library (fireEvent / userEvent)

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