React 测试入门
学习使用 React Testing Library 和 Jest 编写组件测试。 · 难度：入门 · +15XP
React 组件测试基础
测试是保证代码质量的关键环节。React Testing Library 提供轻量级的测试工具，鼓励以用户视角测试组件，而不是测试内部实现细节。通常与 Jest 测试框架配合使用。
核心原则
测试应该模拟用户与应用的交互方式：查找元素、触发事件、断言结果。避免测试内部状态或方法。
| 方法 | 说明 |
|---|---|
| render | 渲染组件到虚拟 DOM |
| screen | 提供全局查询方法，如 getByText, getByRole |
| fireEvent | 触发 DOM 事件 |
| expect | 断言期望的结果 |
代码示例
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';
test('可以增加计数', () => {
render(<Counter />);
const button = screen.getByText('+');
fireEvent.click(button);
expect(screen.getByText(/Count: 1/)).toBeInTheDocument();
});
练习提示
为 Counter 组件编写一个测试：渲染后检查初始计数是否为 0，然后点击“-”按钮，检查计数是否变为 -1。