如何测试react
测试React应用的方法
单元测试（Unit Testing）
使用Jest作为测试框架，结合React Testing Library或Enzyme进行组件测试。Jest提供快照测试、模拟函数等功能，适合测试纯函数或独立组件。
安装依赖：
npm install --save-dev jest @testing-library/react示例测试代码：
import { render, screen } from '@testing-library/react';
import Button from './Button';
test('renders button with correct text', () => {
render(<Button label="Click me" />);
expect(screen.getByText('Click me')).toBeInTheDocument();
});集成测试（Integration Testing）
测试多个组件协同工作的场景。使用React Testing Library模拟用户交互，验证组件组合后的行为。
示例：
import { render, fireEvent } from '@testing-library/react';
import LoginForm from './LoginForm';
test('submits form with username and password', () => {
const mockSubmit = jest.fn();
const { getByLabelText, getByText } = render(<LoginForm onSubmit={mockSubmit} />);
fireEvent.change(getByLabelText('Username'), { target: { value: 'user' } });
fireEvent.change(getByLabelText('Password'), { target: { value: 'pass' } });
fireEvent.click(getByText('Submit'));
expect(mockSubmit).toHaveBeenCalledWith({ username: 'user', password: 'pass' });
});端到端测试（E2E Testing）
使用Cypress或Playwright模拟真实用户操作，测试完整流程。Cypress提供浏览器环境，适合验证路由、API调用等。
安装Cypress：
npm install --save-dev cypress示例测试：
describe('Login Flow', () => {
it('successfully logs in', () => {
cy.visit('/login');
cy.get('#username').type('testuser');
cy.get('#password').type('password');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/dashboard');
});
});测试Hooks
使用@testing-library/react-hooks测试自定义Hook的逻辑隔离。
示例：
import { renderHook } from '@testing-library/react-hooks';
import useCounter from './useCounter';
test('increments counter', () => {
const { result } = renderHook(() => useCounter());
expect(result.current.count).toBe(0);
act(() => result.current.increment());
expect(result.current.count).toBe(1);
});性能测试
使用React Profiler或Lighthouse分析组件渲染性能。结合Jest的--coverage标志生成测试覆盖率报告，确保关键路径覆盖。
生成覆盖率报告：
jest --coverageMock外部依赖
通过Jest的jest.mock()模拟API请求或第三方库，避免测试受外部服务影响。
示例：
jest.mock('axios', () => ({
get: jest.fn(() => Promise.resolve({ data: { id: 1, name: 'Mocked User' } })),
}));
