Agent Skills: React Testing Library

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)