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
Testing custom hooks with renderHook	hooks.md
Testing context providers and consumers	context.md
Testing form inputs, submissions, and validation	forms.md
Common React testing mistakes to avoid	anti-patterns.md
Loading states, error boundaries, portals, Suspense	advanced.md

When to Use Each Guide

Components

Use 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 when you need:

• Testing custom hooks with renderHook
• Using result.current, act(), and rerender()
• Testing hooks with props

Context

Use context.md when you need:

• Using the wrapper option with providers
• Setting up multiple providers
• Creating custom render functions for context
• Testing components that consume context

Forms

Use forms.md when you need:

• Testing controlled inputs
• Testing form submissions
• Testing form validation
• User interaction patterns with forms

Anti-Patterns

Use anti-patterns.md when you need:

• When to avoid manual act() wrapping
• Why manual cleanup() is unnecessary
• Avoiding beforeEach render patterns
• Why to avoid testing component internals
• Why shallow rendering is problematic

Advanced

Use advanced.md when you need:

• Testing loading states
• Testing error boundaries
• Testing portals
• Testing React Suspense

Summary Checklist

React-specific checks:

• Using render() from @testing-library/react (not enzyme's shallow/mount)
• Using renderHook() for custom hooks
• Using wrapper option for context providers
• No manual act() calls (RTL handles it)
• No manual cleanup() calls (automatic)
• Testing component output, not internal state
• Using factory functions, not beforeEach render
• Following TDD workflow (see tdd skill)
• Using general DOM testing patterns (see frontend-testing skill)