react-testing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

本技能专注于React专属的测试模式。若需了解通用DOM测试模式（查询、userEvent、异步、可访问性），请加载

frontend-testing

技能。若需了解TDD工作流，请加载

tdd

技能。

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
```

React组件即函数 - 像测试函数一样测试它们：输入（props）→ 输出（渲染后的DOM）。

测试行为，而非实现细节：

✅ 测试用户所见及操作
✅ 通过公共API（props、渲染输出）进行测试
❌ 不要测试组件状态
❌ 不要测试组件方法
❌ 不要使用浅渲染

现代RTL会自动处理清理工作：

无需为render、userEvent或异步查询手动调用
```
act()
```
无需手动调用
```
cleanup()
```
- 它是自动执行的
使用工厂函数而非
```
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

主题	指南
测试组件、props及条件渲染	components.md
使用renderHook测试自定义Hooks	hooks.md
测试Context Providers与Consumers	context.md
测试表单输入、提交及验证	forms.md
需避免的常见React测试错误	anti-patterns.md
加载状态、错误边界、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

当你需要以下内容时，使用components.md：

基础组件测试模式
测试props如何影响渲染输出
测试条件渲染
正确与错误组件测试示例对比

Hooks

Use hooks.md when you need:

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

当你需要以下内容时，使用hooks.md：

使用
```
renderHook
```
测试自定义Hooks
使用
```
result.current
```
、
```
act()
```
及
```
rerender()
```
测试带props的Hooks

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

当你需要以下内容时，使用context.md：

结合Providers使用
```
wrapper
```
选项
设置多Providers
为Context创建自定义渲染函数
测试消费Context的组件

Forms

表单

Use forms.md when you need:

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

当你需要以下内容时，使用forms.md：

测试受控输入
测试表单提交
测试表单验证
表单的用户交互模式

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

当你需要以下内容时，使用anti-patterns.md：

何时避免手动包裹
```
act()
```
为何无需手动调用
```
cleanup()
```
避免使用
```
beforeEach
```
渲染模式
为何要避免测试组件内部细节
浅渲染存在的问题

Advanced

进阶

Use advanced.md when you need:

Testing loading states
Testing error boundaries
Testing portals
Testing React Suspense

当你需要以下内容时，使用advanced.md：

测试加载状态
测试错误边界
测试Portals
测试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)

React专属检查项：

使用@testing-library/react中的
```
render()
```
（而非enzyme的shallow/mount）
使用
```
renderHook()
```
测试自定义Hooks
为Context Providers使用
```
wrapper
```
选项
无手动
```
act()
```
调用（RTL会自动处理）
无手动
```
cleanup()
```
调用（自动执行）
测试组件输出，而非内部状态
使用工厂函数，而非
```
beforeEach
```
渲染
遵循TDD工作流（详见
```
tdd
```
技能）
使用通用DOM测试模式（详见
```
frontend-testing
```
技能）