react-testing

Original：🇺🇸 English

Translated

WHEN testing React components/hooks/context with React Testing Library; NOT e2e; covers renderHook, providers, forms, and anti-patterns.

11installs

Sourcemintuz/claude-plugins

Added on2026-02-21

NPX Install

npx skill4agent add mintuz/claude-plugins react-testing

SKILL.md Content

View Translation Comparison →

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)