react-testing

# 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)
- ❌ Don't test component state
- ❌ Don't test component methods
- ❌ Don't use shallow rendering

**Modern RTL handles cleanup automatically:**

- No manual `act()` for render, userEvent, or async queries
- No manual `cleanup()` - it's automatic
- Use factory functions instead of `beforeEach`

## Quick Reference

| Topic                                                | Guide                                           |
| ---------------------------------------------------- | ----------------------------------------------- |
| Testing components, props, and conditional rendering | [components.md](references/components.md)       |
| Testing custom hooks with renderHook                 | [hooks.md](references/hooks.md)                 |
| Testing context providers and consumers              | [context.md](references/context.md)             |
| Testing form inputs, submissions, and validation     | [forms.md](references/forms.md)                 |
| Common React testing mistakes to avoid               | [anti-patterns.md](references/anti-patterns.md) |
| Loading states, error boundaries, portals, Suspense  | [advanced.md](references/advanced.md)           |

## When to Use Each Guide

### Components

Use [components.md](references/components.md) when you need:

- Basic component testing patterns
- Testing how props affect rendered output
- Testing conditional rendering
- Examples of correct vs incorrect component tests

### Hooks

Use [hooks.md](references/hooks.md) when you need:

- Testing custom