jest如何测试react
使用 Jest 测试 React 组件
Jest 是 Facebook 推出的 JavaScript 测试框架，特别适合测试 React 应用。以下是如何使用 Jest 测试 React 组件的方法。
安装依赖
确保项目中安装了必要的依赖：
npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event配置 Jest
在 package.json 中添加 Jest 配置：
{
"jest": {
"testEnvironment": "jsdom",
"setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
}
}测试组件渲染
测试组件是否能正确渲染：
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';
test('renders MyComponent', () => {
render(<MyComponent />);
});测试组件文本内容
验证组件是否包含预期的文本内容：
test('displays correct text', () => {
const { getByText } = render(<MyComponent />);
expect(getByText('Hello World')).toBeInTheDocument();
});测试用户交互
模拟用户点击或其他交互行为：
import userEvent from '@testing-library/user-event';
test('handles button click', async () => {
const { getByText } = render(<MyComponent />);
const button = getByText('Click me');
await userEvent.click(button);
expect(button).toHaveTextContent('Clicked');
});测试异步操作
测试组件中的异步逻辑，如 API 调用：
import { screen, waitFor } from '@testing-library/react';
test('loads data on mount', async () => {
render(<MyComponent />);
await waitFor(() => {
expect(screen.getByText('Data loaded')).toBeInTheDocument();
});
});测试组件状态
验证组件状态变化是否正确：
test('updates state on input change', () => {
const { getByLabelText } = render(<MyComponent />);
const input = getByLabelText('Username');
fireEvent.change(input, { target: { value: 'testuser' } });
expect(input.value).toBe('testuser');
});测试快照
使用快照测试确保组件 UI 不会意外更改：
test('matches snapshot', () => {
const { asFragment } = render(<MyComponent />);
expect(asFragment()).toMatchSnapshot();
});模拟模块
使用 jest.mock 模拟外部模块：
jest.mock('./api', () => ({
fetchData: jest.fn(() => Promise.resolve('mock data')),
}));
test('uses mock data', async () => {
render(<MyComponent />);
await waitFor(() => {
expect(screen.getByText('mock data')).toBeInTheDocument();
});
});测试路由组件
使用 MemoryRouter 测试路由组件：
import { MemoryRouter } from 'react-router-dom';
test('renders route', () => {
render(
<MemoryRouter initialEntries={['/home']}>
<App />
</MemoryRouter>
);
expect(screen.getByText('Home Page')).toBeInTheDocument();
});测试覆盖率
生成测试覆盖率报告：
jest --coverage调试测试
在测试中添加 debug 输出：
const { debug } = render(<MyComponent />);
debug();这些方法涵盖了 React 组件测试的主要场景，可以根据具体需求选择适合的测试策略。
