# 自动化测试
# 测试概述
自动化测试是保证React应用质量和可维护性的关键实践。通过编写测试，开发者可以确保应用的各个部分按预期工作，减少bug和回归问题，并提高代码重构的信心。
React生态系统为各种级别的测试提供了丰富的工具和框架，从测试单个组件到模拟整个应用的用户交互。
# 自动化测试的优势
- 减少bug和回归问题：自动测试可以检测新代码引入的问题
- 提高代码质量：测试驱动开发(TDD)促使开发者编写更清晰、更模块化的代码
- 简化重构：有了测试覆盖，开发者可以更自信地修改和优化代码
- 提供文档：测试用例展示了组件和函数的预期行为
- 节省长期成本：虽然编写测试需要初期投入，但可以减少未来的维护成本
# 测试金字塔
测试金字塔是一种测试策略，它将测试分为三个层次：
/\
/ \
/E2E \
/------\
/集成测试\
/----------\
/ 单元测试 \
/--------------\
- 单元测试：测试最小的可测试单元（如函数、组件）
- 集成测试：测试多个单元如何一起工作
- 端到端(E2E)测试：测试整个应用流程，模拟真实用户交互
理想的测试策略应该包含所有这三种类型，但具体比例可以根据项目需求调整。
# 单元测试
单元测试关注于测试应用中的最小独立单元，通常是单个函数或组件。
# Jest 基础
Jest是React生态系统中最流行的测试运行器和断言库，由Facebook维护。
# 安装和配置
# 使用npm
npm install --save-dev jest @types/jest
# 使用yarn
yarn add --dev jest @types/jest
# 使用pnpm
pnpm add -D jest @types/jest
基本配置（jest.config.js）：
module.exports = {
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
transform: {
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }]
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
}
};
# 编写基本测试
// sum.js
export function sum(a, b) {
return a + b;
}
// sum.test.js
import { sum } from './sum';
describe('sum function', () => {
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
test('adds negative numbers correctly', () => {
expect(sum(-1, -2)).toBe(-3);
});
});
# Jest断言API
Jest提供了丰富的断言（或"匹配器"）API：
// 基本匹配器
expect(value).toBe(exactValue); // 精确匹配（===）
expect(value).toEqual(obj); // 深度相等
expect(value).not.toBe(exactValue); // 否定断言
// 真值检查
expect(value).toBeTruthy(); // 检查真值
expect(value).toBeFalsy(); // 检查假值
expect(value).toBeNull(); // 检查null
expect(value).toBeUndefined(); // 检查undefined
expect(value).toBeDefined(); // 检查已定义
// 数字比较
expect(value).toBeGreaterThan(number); // >
expect(value).toBeGreaterThanOrEqual(number); // >=
expect(value).toBeLessThan(number); // <
expect(value).toBeLessThanOrEqual(number); // <=
// 字符串匹配
expect(string).toMatch(/regexp/); // 正则表达式匹配
// 数组/集合
expect(array).toContain(item); // 包含项
expect(array).toHaveLength(number); // 长度检查
// 异常
expect(() => fn()).toThrow(); // 抛出异常
expect(() => fn()).toThrow(Error); // 抛出特定异常
# React Testing Library
React Testing Library是一个用于测试React组件的库，鼓励从用户角度编写测试。
# 安装和设置
# 使用npm
npm install --save-dev @testing-library/react @testing-library/jest-dom
# 使用yarn
yarn add --dev @testing-library/react @testing-library/jest-dom
# 使用pnpm
pnpm add -D @testing-library/react @testing-library/jest-dom
在Jest配置中添加Jest DOM扩展（jest.setup.js）：
import '@testing-library/jest-dom';
# 测试React组件
// Button.jsx
function Button({ onClick, children, disabled }) {
return (
<button disabled={disabled} onClick={onClick}>
{children}
</button>
);
}
// Button.test.jsx
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';
describe('Button component', () => {
test('renders button with text', () => {
render(<Button>Click me</Button>);
const buttonElement = screen.getByText('Click me');
expect(buttonElement).toBeInTheDocument();
});
test('calls onClick when clicked', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click me</Button>);
fireEvent.click(screen.getByText('Click me'));
expect(handleClick).toHaveBeenCalledTimes(1);
});
test('should be disabled when disabled prop is true', () => {
render(<Button disabled>Click me</Button>);
expect(screen.getByText('Click me')).toBeDisabled();
});
});
# 查询方法
React Testing Library提供了多种查询方法来获取组件中的元素：
// 优先级从高到低
// 1. 可访问性查询（推荐）
getByRole('button', { name: 'Submit' }); // 通过ARIA角色和名称
getByLabelText('Username'); // 通过标签文本
getByPlaceholderText('Enter username'); // 通过占位符文本
getByText('Click me'); // 通过文本内容
getByDisplayValue('current value'); // 通过当前表单值
// 2. 语义化查询
getByAltText('Profile picture'); // 通过alt属性
getByTitle('Close'); // 通过title属性
// 3. 测试ID（不推荐，除非上述方法都不可用）
getByTestId('submit-button'); // 通过data-testid属性
每种查询方法都有三种变体：
getBy*：返回匹配的元素，如果未找到或找到多个则抛出错误queryBy*：返回匹配的元素，如果未找到则返回null（适合测试元素不存在）findBy*：返回Promise，用于异步查询
还有getAllBy*，queryAllBy*和findAllBy*用于返回多个匹配结果。
# 用户交互模拟
// 使用fireEvent
fireEvent.click(button);
fireEvent.change(input, { target: { value: 'new value' } });
fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
// 使用userEvent（更接近真实用户交互）
import userEvent from '@testing-library/user-event';
test('typing and clicking', async () => {
const user = userEvent.setup();
render(<MyComponent />);
await user.type(screen.getByRole('textbox'), 'Hello, world!');
await user.click(screen.getByRole('button'));
// 断言...
});
# 测试Hooks
测试自定义hooks通常使用@testing-library/react-hooks：
// useCounter.js
import { useState, useCallback } from 'react';
function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
const increment = useCallback(() => setCount(c => c + 1), []);
const decrement = useCallback(() => setCount(c => c - 1), []);
const reset = useCallback(() => setCount(initialValue), [initialValue]);
return { count, increment, decrement, reset };
}
// useCounter.test.js
import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';
describe('useCounter', () => {
test('should increment counter', () => {
const { result } = renderHook(() => useCounter());
act(() => {
result.current.increment();
});
expect(result.current.count).toBe(1);
});
test('should decrement counter', () => {
const { result } = renderHook(() => useCounter(5));
act(() => {
result.current.decrement();
});
expect(result.current.count).toBe(4);
});
test('should reset counter', () => {
const { result } = renderHook(() => useCounter(5));
act(() => {
result.current.decrement();
result.current.reset();
});
expect(result.current.count).toBe(5);
});
});
对于React 18，推荐使用新的API：
import { renderHook, act } from '@testing-library/react';
test('should increment counter', () => {
const { result } = renderHook(() => useCounter());
act(() => {
result.current.increment();
});
expect(result.current.count).toBe(1);
});
# Mock和测试替身
在单元测试中，我们通常需要隔离被测单元，这时就需要使用测试替身：
# Jest模拟函数
test('calls callback with correct arguments', () => {
const mockCallback = jest.fn();
const button = render(<Button onClick={mockCallback} />);
fireEvent.click(button);
expect(mockCallback).toHaveBeenCalledTimes(1);
expect(mockCallback).toHaveBeenCalledWith(expect.any(Object));
});
# 模拟模块
// 模拟整个模块
jest.mock('./api');
import { fetchUser } from './api';
beforeEach(() => {
fetchUser.mockResolvedValue({ id: 1, name: 'John' });
});
test('displays user name after fetching', async () => {
render(<UserProfile userId={1} />);
// 等待异步操作完成
await screen.findByText('John');
expect(fetchUser).toHaveBeenCalledWith(1);
});
# 模拟计时器
// 使用Jest的假计时器
jest.useFakeTimers();
test('calls function after 1 second', () => {
const callback = jest.fn();
setTimeout(callback, 1000);
// 快进1秒
jest.advanceTimersByTime(1000);
expect(callback).toHaveBeenCalledTimes(1);
});
# 集成测试
集成测试验证多个组件或模块如何一起工作，检测它们之间的交互问题。
# 设置集成测试环境
对于React应用，集成测试通常仍使用Jest和React Testing Library，但会测试更大的组件树。
// 创建自定义渲染器，包含Provider和Router等
// test-utils.js
import { render } from '@testing-library/react';
import { ThemeProvider } from '../context/ThemeContext';
import { BrowserRouter } from 'react-router-dom';
const AllTheProviders = ({ children }) => {
return (
<ThemeProvider>
<BrowserRouter>
{children}
</BrowserRouter>
</ThemeProvider>
);
};
const customRender = (ui, options) =>
render(ui, { wrapper: AllTheProviders, ...options });
// 重新导出所有
export * from '@testing-library/react';
export { customRender as render };
# 测试表单交互
// LoginForm集成测试
import { render, screen, fireEvent, waitFor } from '../test-utils';
import LoginForm from './LoginForm';
import { login } from '../api';
// 模拟API
jest.mock('../api');
describe('LoginForm', () => {
test('submits username and password', async () => {
// 设置API模拟返回
login.mockResolvedValueOnce({ success: true });
// 渲染组件
render(<LoginForm onSuccess={jest.fn()} />);
// 填写表单
fireEvent.change(screen.getByLabelText(/username/i), {
target: { value: 'testuser' }
});
fireEvent.change(screen.getByLabelText(/password/i), {
target: { value: 'password123' }
});
// 提交表单
fireEvent.click(screen.getByRole('button', { name: /login/i }));
// 验证API被正确调用
expect(login).toHaveBeenCalledWith({
username: 'testuser',
password: 'password123'
});
// 等待异步操作完成
await waitFor(() => {
expect(screen.getByText(/login successful/i)).toBeInTheDocument();
});
});
test('displays error message on login failure', async () => {
// 设置API模拟返回失败
login.mockRejectedValueOnce(new Error('Invalid credentials'));
render(<LoginForm onSuccess={jest.fn()} />);
// 填写表单并提交
fireEvent.change(screen.getByLabelText(/username/i), {
target: { value: 'testuser' }
});
fireEvent.change(screen.getByLabelText(/password/i), {
target: { value: 'wrongpassword' }
});
fireEvent.click(screen.getByRole('button', { name: /login/i }));
// 验证错误消息显示
await waitFor(() => {
expect(screen.getByText(/invalid credentials/i)).toBeInTheDocument();
});
});
});
# 测试路由导航
import { render, screen, fireEvent } from '../test-utils';
import App from './App';
describe('App routing', () => {
test('navigates to about page when clicking About link', () => {
render(<App />);
// 点击导航链接
fireEvent.click(screen.getByRole('link', { name: /about/i }));
// 验证页面内容已更改
expect(screen.getByRole('heading', { name: /about us/i })).toBeInTheDocument();
});
test('navigates to products page and shows product list', () => {
render(<App />);
// 导航到产品页面
fireEvent.click(screen.getByRole('link', { name: /products/i }));
// 验证产品列表已加载
expect(screen.getByRole('heading', { name: /products/i })).toBeInTheDocument();
expect(screen.getByRole('list')).toBeInTheDocument();
});
});
# 测试Redux集成
import { render, screen, fireEvent } from '@testing-library/react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import Counter from '../features/counter/Counter';
// 创建测试store
function renderWithRedux(
ui,
{
preloadedState,
store = configureStore({
reducer: { counter: counterReducer },
preloadedState
}),
...renderOptions
} = {}
) {
function Wrapper({ children }) {
return <Provider store={store}>{children}</Provider>;
}
return {
store,
...render(ui, { wrapper: Wrapper, ...renderOptions })
};
}
describe('Counter Redux Integration', () => {
test('shows initial count and increments when button is clicked', () => {
// 初始状态为0
const { store } = renderWithRedux(<Counter />);
// 检查初始显示
expect(screen.getByText('0')).toBeInTheDocument();
// 点击增加按钮
fireEvent.click(screen.getByRole('button', { name: /increment/i }));
// 检查显示和store状态
expect(screen.getByText('1')).toBeInTheDocument();
expect(store.getState().counter.value).toBe(1);
});
test('starts with preloaded state', () => {
// 使用预加载状态
renderWithRedux(<Counter />, {
preloadedState: { counter: { value: 10 } }
});
// 检查预加载状态显示
expect(screen.getByText('10')).toBeInTheDocument();
});
});
# 端到端测试 (E2E)
端到端测试模拟真实用户使用应用的方式，测试整个应用流程。
# Cypress
Cypress是一个流行的端到端测试框架，提供了丰富的API和直观的调试体验。
# 安装和设置
# 使用npm
npm install --save-dev cypress
# 使用yarn
yarn add --dev cypress
# 使用pnpm
pnpm add -D cypress
在package.json中添加命令：
"scripts": {
"cypress:open": "cypress open",
"cypress:run": "cypress run"
}
# 编写基本测试
// cypress/integration/login.spec.js
describe('Login Page', () => {
beforeEach(() => {
// 在每个测试前访问登录页面
cy.visit('/login');
});
it('displays login form', () => {
// 验证表单元素存在
cy.get('form').should('exist');
cy.get('input[name="username"]').should('exist');
cy.get('input[name="password"]').should('exist');
cy.get('button[type="submit"]').should('exist');
});
it('allows user to login', () => {
// 填写表单
cy.get('input[name="username"]').type('testuser');
cy.get('input[name="password"]').type('password123');
// 提交表单
cy.get('button[type="submit"]').click();
// 验证登录成功，重定向到仪表板
cy.url().should('include', '/dashboard');
cy.get('h1').should('contain', 'Dashboard');
});
it('shows error for invalid credentials', () => {
// 填写无效凭据
cy.get('input[name="username"]').type('testuser');
cy.get('input[name="password"]').type('wrongpassword');
// 提交表单
cy.get('button[type="submit"]').click();
// 验证错误消息
cy.get('.error-message')
.should('exist')
.and('contain', 'Invalid username or password');
});
});
# Cypress常用命令
Cypress提供了丰富的命令用于交互和断言：
// 导航
cy.visit('/about');
cy.go('back');
cy.reload();
// 查询元素
cy.get('.button'); // CSS选择器
cy.contains('Submit'); // 包含文本
cy.find('.item'); // 在上一个命令的结果中查找
// 交互
cy.get('button').click();
cy.get('input').type('Hello');
cy.get('input').clear();
cy.get('select').select('Option 1');
cy.get('[type="checkbox"]').check();
cy.get('[type="file"]').attachFile('test.pdf');
// 等待
cy.wait(1000); // 等待指定时间
cy.wait('@apiRequest'); // 等待网络请求
// 断言
cy.get('.count').should('have.text', '5');
cy.get('button').should('be.disabled');
cy.get('.list').should('have.length', 3);
cy.url().should('include', '/dashboard');
// 链式断言
cy.get('.message')
.should('be.visible')
.and('contain', 'Success')
.and('have.class', 'alert-success');
// 自定义断言
cy.get('.value').should(($el) => {
expect(parseFloat($el.text())).to.be.greaterThan(0);
});
# 网络请求模拟
Cypress可以拦截和模拟网络请求，方便测试不同的API响应场景：
describe('API Testing', () => {
it('displays users from API', () => {
// 模拟API响应
cy.intercept('GET', '/api/users', {
statusCode: 200,
body: [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Smith' }
]
}).as('getUsers');
// 访问用户页面
cy.visit('/users');
// 等待API请求完成
cy.wait('@getUsers');
// 验证用户列表显示
cy.get('.user-item').should('have.length', 2);
cy.contains('John Doe').should('exist');
cy.contains('Jane Smith').should('exist');
});
it('handles API error', () => {
// 模拟API错误
cy.intercept('GET', '/api/users', {
statusCode: 500,
body: { message: 'Server Error' }
}).as('getUsersError');
cy.visit('/users');
cy.wait('@getUsersError');
// 验证错误消息显示
cy.get('.error-message')
.should('exist')
.and('contain', 'Failed to load users');
});
});
# Playwright
Playwright是微软开发的端到端测试工具，支持多种浏览器，包括Chromium、Firefox和WebKit。
# 安装和设置
# 使用npm
npm init playwright@latest
# 或手动安装
npm install --save-dev @playwright/test
创建基本配置文件（playwright.config.js）：
// @ts-check
const { devices } = require('@playwright/test');
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
testDir: './tests',
timeout: 30 * 1000,
expect: {
timeout: 5000
},
reporter: 'html',
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure'
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
};
module.exports = config;
# 编写基本测试
// tests/example.spec.js
import { test, expect } from '@playwright/test';
test.describe('Login Page', () => {
test.beforeEach(async ({ page }) => {
// 在每个测试前访问登录页面
await page.goto('/login');
});
test('displays login form', async ({ page }) => {
// 验证表单元素存在
await expect(page.locator('form')).toBeVisible();
await expect(page.locator('input[name="username"]')).toBeVisible();
await expect(page.locator('input[name="password"]')).toBeVisible();
await expect(page.locator('button[type="submit"]')).toBeVisible();
});
test('allows user to login', async ({ page }) => {
// 填写表单
await page.fill('input[name="username"]', 'testuser');
await page.fill('input[name="password"]', 'password123');
// 提交表单
await page.click('button[type="submit"]');
// 验证登录成功，重定向到仪表板
await expect(page).toHaveURL(/.*dashboard/);
await expect(page.locator('h1')).toContainText('Dashboard');
});
test('shows error for invalid credentials', async ({ page }) => {
// 填写无效凭据
await page.fill('input[name="username"]', 'testuser');
await page.fill('input[name="password"]', 'wrongpassword');
// 提交表单
await page.click('button[type="submit"]');
// 验证错误消息
await expect(page.locator('.error-message')).toBeVisible();
await expect(page.locator('.error-message')).toContainText('Invalid username or password');
});
});
# 测试策略与最佳实践
# 什么应该测试
选择正确的测试目标可以提高测试的投资回报率：
- 关键业务逻辑：核心功能和业务规则
- 复杂的计算和转换：数据处理和算法
- 用户工作流程：常见的用户交互路径
- 边缘情况和错误处理：确保应用在异常情况下表现良好
- 回归测试：曾经出现过bug的功能
# 什么不需要测试
某些内容不需要测试，或者测试价值较低：
- 第三方库和框架：假设它们已经有自己的测试
- 实现细节：不要测试代码如何工作，而是测试它做什么
- 常量和配置：静态数据通常不需要测试
- 非关键UI样式：视觉样式测试成本高，回报低
# 测试金字塔的应用
对于典型的React应用：
单元测试（70%）：
- 工具函数和辅助方法
- 自定义hooks
- 独立组件
- Redux reducers/selectors/actions
集成测试（20%）：
- 组件树
- 表单处理
- 状态管理
- API交互
E2E测试（10%）：
- 关键用户流程
- 登录和认证
- 付款流程
- 多步骤表单
# 测试驱动开发 (TDD)
测试驱动开发是一种先编写测试，再编写实现代码的方法：
- Red：编写一个会失败的测试
- Green：编写最少量的代码使测试通过
- Refactor：重构代码，保持测试通过
TDD的优势：
- 确保所有代码都有测试覆盖
- 防止过度工程化
- 促使代码具有良好的可测试性设计
// TDD示例：创建一个计数器组件
// 1. 首先编写测试
// Counter.test.jsx
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';
describe('Counter', () => {
test('renders with initial count of 0', () => {
render(<Counter />);
expect(screen.getByText('0')).toBeInTheDocument();
});
test('increments count when increment button is clicked', () => {
render(<Counter />);
fireEvent.click(screen.getByRole('button', { name: /increment/i }));
expect(screen.getByText('1')).toBeInTheDocument();
});
});
// 2. 实现组件使测试通过
// Counter.jsx
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<span>{count}</span>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
# 常见的测试问题和解决方案
# 1. 异步操作
// 等待异步操作完成
test('loads data after clicking button', async () => {
render(<DataLoader />);
fireEvent.click(screen.getByRole('button', { name: /load data/i }));
// 使用findBy等待元素出现
const data = await screen.findByText(/loaded data/i);
expect(data).toBeInTheDocument();
});
# 2. 测试React Context
// 创建测试包装器
function renderWithContext(ui, { providerProps, ...renderOptions }) {
return render(
<ThemeContext.Provider {...providerProps}>{ui}</ThemeContext.Provider>,
renderOptions
);
}
test('uses theme from context', () => {
const providerProps = { value: { theme: 'dark' } };
renderWithContext(<ThemedButton>Click Me</ThemedButton>, { providerProps });
const button = screen.getByRole('button');
expect(button).toHaveClass('dark-theme');
});
# 3. 测试带有Portal的组件
// 为Portal创建挂载点
beforeEach(() => {
const portalRoot = document.createElement('div');
portalRoot.setAttribute('id', 'portal-root');
document.body.appendChild(portalRoot);
});
afterEach(() => {
const portalRoot = document.getElementById('portal-root');
if (portalRoot) {
document.body.removeChild(portalRoot);
}
});
test('renders modal in portal', () => {
render(<Modal isOpen>Modal Content</Modal>);
// 模态框内容会被渲染到portal-root中
const modalContent = screen.getByText('Modal Content');
expect(modalContent).toBeInTheDocument();
});
# 测试覆盖率
测试覆盖率是衡量测试质量的指标之一：
// package.json 配置
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts",
"!src/index.tsx",
"!src/serviceWorker.ts"
],
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
}
}
运行覆盖率分析：
npm test -- --coverage
覆盖率报告包括：
- 语句覆盖率：已执行的语句百分比
- 分支覆盖率：已测试的条件分支百分比（if/else等）
- 函数覆盖率：已调用的函数百分比
- 行覆盖率：已执行的代码行百分比
# 持续集成中的测试
在CI/CD流程中集成测试可以确保每次代码变更都经过测试验证：
# .github/workflows/test.yml
name: Run Tests
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: '18'
- name: Install Dependencies
run: npm ci
- name: Run Unit and Integration Tests
run: npm test -- --coverage
- name: Run E2E Tests
run: npm run test:e2e
- name: Upload Coverage Reports
uses: codecov/codecov-action@v1
# 总结
自动化测试是React应用开发的关键部分，有助于提高代码质量和开发效率。不同类型的测试（单元、集成、E2E）有不同的目的和适用范围，应根据项目需求选择合适的测试策略。
通过遵循测试最佳实践，开发团队可以构建更加可靠、可维护的React应用，减少bug和技术债务，提高用户体验。
← 组件库设计 React中的性能优化 →