intermediate

Testing Library

Test user-visible behavior through accessible queries, events, async assertions, and components rendered close to real usage.

Testing Library encourages tests that resemble user interaction: query by role, label, or text; fire events; await async UI with `findBy` and `waitFor`. It discourages testing implementation details like state variable names or shallow rendered output.

					await user.click(screen.getByRole('button', { name: /save/i }));
expect(await screen.findByText(/saved/i)).toBeInTheDocument();
				

Accessible queries double as quality checks—if you cannot query it, users may not reach it either.

On interviews: explain query priority (role > label > text) and how `userEvent` differs from `fireEvent`.

Common pitfalls: `getByTestId` as default, not awaiting async updates, and querying detached portals incorrectly.

The trade-off is slightly slower tests versus resilience to refactors that preserve UX.

Checklist:

  • Prefer `getByRole` and accessible names.
  • Use `userEvent` for realistic interactions.
  • Assert visible outcomes, not internal state.