🧪 React TDD 实战
📘 30 章 · 红-绿-重构
♻️
1
TDD基础
红-绿-重构
为什么用TDD
2
环境搭建
Vite
Jest+RTL
配置
3
第一个测试
render
screen
getByText
4
Jest基础
describe/it
expect
setup/teardown
5
渲染测试
文本内容
元素属性
子组件
6
用户交互
fireEvent
userEvent
点击/输入/提交
7
状态测试
useState
初始化
更新UI
8
Props测试
接收props
默认props
变化渲染
9
条件渲染
if/else
三元
&&
10
列表渲染
空列表
列表项点击
过滤
11
表单测试
受控组件
验证/提交/重置
12
事件处理
事件对象
阻止默认
冒泡
13
异步操作
setTimeout
Promise
async/await
14
API调用
模拟fetch
加载/成功/错误
15
Context测试
Provider
useContext
值更新
16
Reducer测试
useReducer
dispatch
复杂状态
17
Ref测试
useRef
绑定DOM
操作DOM
18
Effect测试
依赖数组
清理函数
多次渲染
19
自定义Hook测试
renderHook
返回值
状态变化
20
快照测试
toMatchSnapshot
更新快照
最佳实践
21
Mock函数
jest.fn()
模拟返回值/实现
断言调用
22
Mock模块
jest.mock
模拟三方库
自定义模块
23
路由测试
MemoryRouter
跳转/参数
嵌套路由
24
Redux测试
测试store
connect
useSelector
25
错误边界
错误捕获
降级UI
测试边界
26
可访问性测试
jest-axe
ARIA
键盘/焦点
27
性能测试
渲染次数
React.memo
避免重渲染
28
集成测试
组件通信
数据流
用户流程
29
端到端测试
Cypress
E2E
真实API
30
TDD实战项目
Todo应用
需求分析
迭代重构