intermediate

Testing Library

Test through accessible roles, labels, user events, async finders, and visible behavior.

Testing Library encourages tests that resemble user interaction: render components, query by accessible roles and labels, fire events, and assert visible outcomes. Avoid testing implementation details like internal state or private methods — refactors should not break tests that track behavior.

Use `screen` queries, `userEvent` over raw `fireEvent` when possible, and async `findBy` for data that arrives later. Wrap providers (router, query client) in a test helper.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

  • Query like a user, not like the implementation.
  • Prefer userEvent for realistic input.
  • Async findBy for loaded content.