Common Mistakes to Avoid When Using React Testing Library

As a developer who’s spent countless hours testing React applications, I’ve encountered numerous pitfalls when using React Testing Library (RTL). Today, I want to share some common mistakes that you should avoid to make your testing journey smoother and more effective.

Finding Elements by Implementation Details

One of the biggest mistakes I see developers make is querying elements based on implementation details rather than how users interact with them. Remember, RTL follows the principle of testing your application the way users use it.

❌ Don’t do this:

// Finding by class name
const element = screen.getByClassName('submit-button');

// Finding by ID
const input = screen.getByTestId('username-input');

✅ Do this instead:

// Finding by role and accessible name
const button = screen.getByRole('button', { name: /submit/i });

// Finding by label text
const input = screen.getByLabelText(/username/i);

Overusing act() Function

Many developers wrap their test code in act() unnecessarily. Remember, most RTL helpers already wrap things in act() for you.

❌ Avoid unnecessary act():

await act(async () => {
  fireEvent.click(button);
});

✅ Better approach:

fireEvent.click(button);
// or even better
userEvent.click(button);

Incorrect Async Testing

Testing asynchronous operations can be tricky. A common mistake is not handling promises correctly or using the wrong async utilities.

❌ Problematic async testing:

test('loads items', () => {
  const items = screen.getByText(/loading/i);
  expect(items).toBeInTheDocument();
  // This might fail as the test finishes before data loads
});

✅ Proper async testing:

test('loads items', async () => {
  await screen.findByText(/loading/i);
  const items = await screen.findByRole('list');
  expect(items).toBeInTheDocument();
});

Not Using User-Event Over FireEvent

Many developers still use fireEvent when userEvent would be more appropriate. UserEvent provides a more realistic simulation of user interactions.

❌ Less ideal approach:

fireEvent.change(input, { target: { value: 'test' } });
fireEvent.click(button);

✅ Better approach:

await userEvent.type(input, 'test');
await userEvent.click(button);

Conclusion

Remember, React Testing Library is designed to test your application from the user’s perspective. By avoiding these common mistakes, you’ll write more reliable and maintainable tests that give you confidence in your application’s behavior.