React Testing Library

This skill focuses on React-specific testing patterns. For general DOM testing patterns (queries, userEvent, async, accessibility), load the frontend-testing skill. For TDD workflow, load the tdd skill.

Core Principles

React components are functions - Test them like functions: inputs (props) → output (rendered DOM).

Test behavior, not implementation:

• ✅ Test what users see and do
• ✅ Test through public APIs (props, rendered output)
• ✅ Query by accessible role, label, or visible text
• ✅ Add { name } to getByRole only where the element has an accessible name: content gives one to a button, a link, or a heading, and aria-label or aria-labelledby gives one to 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
• ❌ Don't test component methods
• ❌ Don't assert on a class name, a test id, or a handler name while accessible output proves the same behaviour; those names change without changing what a user experiences
• ❌ Don't use shallow rendering