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.