React Testing Library

React-specific testing patterns. For the general DOM rules (query priority, accessible names, userEvent, async and absence assertions), load the frontend-testing skill. For the TDD workflow, load the tdd skill.

Core Principles

React components are functions. Test them as inputs (props) → output (rendered DOM).

Test behaviour, not implementation (principle-test-behavior-not-implementation):

• ✅ Test what users see and do, through public APIs (props, rendered output), queried by accessible role, label, or visible text
• ✅ Add { name } to getByRole only where the element has an accessible name: content names a button, a link, or a heading; aria-label or aria-labelledby names an element whose role accepts an author-supplied name; a plain <li> takes no name from its text, so query it by that text
• ❌ Don't test component state or component methods
• ❌ Don't assert on a class name, a test id, or a handler name while accessible output proves the same behaviour
• ❌ Don't use shallow rendering

Modern RTL wraps and cleans up for you: