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

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)