jest如何测试react
使用 Jest 测试 React 组件
Jest 是 Facebook 推出的 JavaScript 测试框架，特别适合测试 React 应用。以下介绍如何使用 Jest 测试 React 组件。
安装依赖
确保项目中已安装 Jest 和相关依赖：
npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event@testing-library/react 提供 React 组件的测试工具，@testing-library/jest-dom 扩展了 Jest 的 DOM 断言，@testing-library/user-event 用于模拟用户交互。
配置 Jest
在 package.json 中添加 Jest 配置：
{
"jest": {
"testEnvironment": "jsdom",
"setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
}
}testEnvironment 设置为 jsdom 以模拟浏览器环境，setupFilesAfterEnv 加载 jest-dom 的扩展断言。
编写测试文件
假设有一个简单的 Button 组件：
// Button.js
import React from 'react';
const Button = ({ onClick, children }) => {
return <button onClick={onClick}>{children}</button>;
};
export default Button;为 Button 组件编写测试：
// Button.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';
test('renders button with children', () => {
render(<Button>Click me</Button>);
expect(screen.getByText('Click me')).toBeInTheDocument();
});
test('calls onClick prop when clicked', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click me</Button>);
fireEvent.click(screen.getByText('Click me'));
expect(handleClick).toHaveBeenCalledTimes(1);
});测试异步组件
对于异步组件，使用 waitFor 和 async/await：
// AsyncComponent.test.js
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import AsyncComponent from './AsyncComponent';
test('displays data after fetching', async () => {
render(<AsyncComponent />);
await waitFor(() => {
expect(screen.getByText('Loaded data')).toBeInTheDocument();
});
});快照测试
Jest 支持快照测试，用于捕获组件渲染结果：
// ButtonSnapshot.test.js
import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';
test('matches snapshot', () => {
const { asFragment } = render(<Button>Click me</Button>);
expect(asFragment()).toMatchSnapshot();
});首次运行会生成快照文件，后续测试会比较当前渲染结果与快照是否一致。
模拟模块
使用 jest.mock 模拟外部模块：
// ApiComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import ApiComponent from './ApiComponent';
jest.mock('./api', () => ({
fetchData: jest.fn().mockResolvedValue('Mocked data'),
}));
test('displays mocked data', async () => {
render(<ApiComponent />);
expect(await screen.findByText('Mocked data')).toBeInTheDocument();
});运行测试
在 package.json 中添加测试脚本：
{
"scripts": {
"test": "jest"
}
}运行测试：
npm test通过以上方法，可以全面测试 React 组件的渲染、交互、异步逻辑和模块依赖。
