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 hooks with renderHook
• Using result.current, act(), and rerender()
• Testing hooks with props

Context

Use [context.md](references/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](references/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](references/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](references/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)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: mintuz
• Source: mintuz/skills
• License: MIT

Install and usage instructions live in the source repository linked above.