react项目如何做单元测试
安装测试工具
在React项目中，通常使用Jest作为测试框架，配合React Testing Library或Enzyme进行组件测试。确保项目中已安装相关依赖：
npm install --save-dev jest @testing-library/react @testing-library/jest-dom若使用Create React App创建项目，Jest和React Testing Library已默认集成。
配置测试环境
在项目根目录创建或修改jest.config.js文件，配置Jest运行环境：
module.exports = {
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};确保package.json中包含测试脚本：
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
}编写组件测试
以测试一个简单的Button组件为例：
-
创建组件文件
Button.js：import React from 'react'; const Button = ({ onClick, children }) => ( <button onClick={onClick}>{children}</button> ); export default Button; -
创建测试文件
Button.test.js：
import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import Button from './Button';
test('renders button with text and handles click', () => { const handleClick = jest.fn(); render(Click Me);
const button = screen.getByText('Click Me'); expect(button).toBeInTheDocument();
fireEvent.click(button); expect(handleClick).toHaveBeenCalledTimes(1); });
### 测试异步逻辑
对于包含异步操作的组件（如API调用），使用`jest.mock`和`async/await`：
```jsx
import { fetchData } from './api';
jest.mock('./api', () => ({
fetchData: jest.fn(),
}));
test('async component test', async () => {
fetchData.mockResolvedValue('data');
render(<AsyncComponent />);
await screen.findByText('data');
expect(fetchData).toHaveBeenCalled();
});快照测试
通过快照测试确保UI结构不变：
test('matches snapshot', () => {
const { asFragment } = render(<Button>Save</Button>);
expect(asFragment()).toMatchSnapshot();
});覆盖率报告
生成测试覆盖率报告：
jest --coverage覆盖率结果会输出到coverage目录，包含HTML可视化报告。
测试Redux或Context
对于状态管理逻辑，单独测试Redux的reducer或action：
// reducer.test.js
import reducer from './reducer';
test('handles ADD_TODO action', () => {
const state = reducer([], { type: 'ADD_TODO', text: 'Test' });
expect(state).toEqual([{ text: 'Test', completed: false }]);
});调试测试
在测试中插入debug()输出DOM结构：
const { debug } = render(<Component />);
debug();或使用Chrome调试器运行：
node --inspect-brk node_modules/.bin/jest --runInBand常见问题解决
- Mock模块：使用
jest.mock替换第三方库。 - 定时器：用
jest.useFakeTimers()模拟setTimeout。 - 事件：
fireEvent或userEvent模拟用户交互。
通过以上方法可系统性地为React项目编写单元测试，覆盖组件渲染、交互和状态逻辑。
