当前位置：首页 > news >正文

前端测试：Jest 实践的新方法

news 2026/4/17 18:45:18

前端测试：Jest 实践的新方法

一、引言：别再忽视前端测试

"前端测试？那是后端的事儿，前端不用管！"——我相信这是很多前端开发者常说的话。

但事实是：

前端测试可以提高代码质量
前端测试可以减少 bug
前端测试可以提高开发效率
前端测试可以增强代码的可维护性

前端测试不是后端的专利，前端同样需要重视。今天，我这个专治 bug 的手艺人，就来教你如何使用 Jest 进行前端测试，提升代码质量。

二、Jest 的新趋势：从简单到全面

2.1 现代前端测试的演进

前端测试经历了从简单到全面的演进过程：

第一代：手动测试（通过浏览器手动测试）
第二代：单元测试（测试单个函数）
第三代：集成测试（测试组件之间的交互）
第四代：端到端测试（测试整个应用流程）
第五代：持续集成测试（自动运行测试）

2.2 Jest 的核心价值

Jest 可以带来以下价值：

简洁的 API：易于使用的测试 API
快速：并行运行测试，提高测试速度
内置断言：不需要额外的断言库
内置模拟：支持函数和模块的模拟
代码覆盖率：内置代码覆盖率报告
易于配置：默认配置适合大多数项目

三、实战技巧：从配置到使用

3.1 基本配置

// 反面教材：没有配置 Jest // 直接使用默认配置 // 正面教材：配置 Jest // jest.config.js module.exports = { testEnvironment: 'jsdom', // 模拟浏览器环境 roots: ['<rootDir>/src'], // 测试文件根目录 testMatch: ['**/__tests__/**/*.{js,jsx,ts,tsx}', '**/*.{test,spec}.{js,jsx,ts,tsx}'], // 测试文件匹配模式 setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'], // 测试设置文件 collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'], // 代码覆盖率收集范围 coverageThreshold: { global: { branches: 80, functions: 80, lines: 80, statements: 80, }, }, // 代码覆盖率阈值 }; // 正面教材2：使用 TypeScript // jest.config.js module.exports = { preset: 'ts-jest', testEnvironment: 'jsdom', roots: ['<rootDir>/src'], testMatch: ['**/__tests__/**/*.{js,jsx,ts,tsx}', '**/*.{test,spec}.{js,jsx,ts,tsx}'], setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'], collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'], coverageThreshold: { global: { branches: 80, functions: 80, lines: 80, statements: 80, }, }, };

3.2 单元测试

// 反面教材：没有单元测试 // 直接编写代码，不测试 // 正面教材：编写单元测试 // utils.js export function add(a, b) { return a + b; } export function subtract(a, b) { return a - b; } export function multiply(a, b) { return a * b; } export function divide(a, b) { if (b === 0) { throw new Error('Division by zero'); } return a / b; } // utils.test.js import { add, subtract, multiply, divide } from './utils'; describe('Utils', () => { describe('add', () => { test('should return the sum of two numbers', () => { expect(add(1, 2)).toBe(3); expect(add(0, 0)).toBe(0); expect(add(-1, 1)).toBe(0); }); }); describe('subtract', () => { test('should return the difference of two numbers', () => { expect(subtract(2, 1)).toBe(1); expect(subtract(0, 0)).toBe(0); expect(subtract(-1, 1)).toBe(-2); }); }); describe('multiply', () => { test('should return the product of two numbers', () => { expect(multiply(2, 3)).toBe(6); expect(multiply(0, 5)).toBe(0); expect(multiply(-2, 3)).toBe(-6); }); }); describe('divide', () => { test('should return the quotient of two numbers', () => { expect(divide(6, 3)).toBe(2); expect(divide(0, 5)).toBe(0); expect(divide(-6, 3)).toBe(-2); }); test('should throw an error when dividing by zero', () => { expect(() => divide(1, 0)).toThrow('Division by zero'); }); }); });

3.3 组件测试

// 反面教材：没有组件测试 // 直接编写组件，不测试 // 正面教材：编写组件测试 // Button.jsx import React from 'react'; const Button = ({ children, onClick, disabled }) => { return ( <button onClick={onClick} disabled={disabled} className="button" > {children} </button> ); }; export default Button; // Button.test.jsx import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import Button from './Button'; describe('Button', () => { test('should render children', () => { render(<Button>Click me</Button>); expect(screen.getByText('Click me')).toBeInTheDocument(); }); test('should call onClick when clicked', () => { const onClick = jest.fn(); render(<Button onClick={onClick}>Click me</Button>); fireEvent.click(screen.getByText('Click me')); expect(onClick).toHaveBeenCalledTimes(1); }); test('should be disabled when disabled prop is true', () => { const onClick = jest.fn(); render(<Button onClick={onClick} disabled>Click me</Button>); const button = screen.getByText('Click me'); expect(button).toBeDisabled(); fireEvent.click(button); expect(onClick).not.toHaveBeenCalled(); }); test('should not be disabled when disabled prop is false', () => { const onClick = jest.fn(); render(<Button onClick={onClick} disabled={false}>Click me</Button>); const button = screen.getByText('Click me'); expect(button).not.toBeDisabled(); fireEvent.click(button); expect(onClick).toHaveBeenCalledTimes(1); }); });

3.4 模拟和间谍

// 反面教材：没有使用模拟和间谍 // 直接调用真实的函数 // 正面教材：使用模拟和间谍 // api.js export async function fetchUser(id) { const response = await fetch(`/api/user/${id}`); if (!response.ok) throw new Error('Failed to fetch user'); return response.json(); } // userService.js import { fetchUser } from './api'; export async function getUserInfo(id) { try { const user = await fetchUser(id); return user; } catch (error) { console.error('Error fetching user:', error); throw error; } } // userService.test.js import { getUserInfo } from './userService'; import { fetchUser } from './api'; // 模拟 api 模块 jest.mock('./api'); describe('getUserInfo', () => { test('should return user data when fetchUser succeeds', async () => { const mockUser = { id: 1, name: 'John Doe', email: 'john@example.com' }; fetchUser.mockResolvedValue(mockUser); const user = await getUserInfo(1); expect(user).toEqual(mockUser); expect(fetchUser).toHaveBeenCalledWith(1); }); test('should throw error when fetchUser fails', async () => { const mockError = new Error('Failed to fetch user'); fetchUser.mockRejectedValue(mockError); await expect(getUserInfo(1)).rejects.toThrow('Failed to fetch user'); expect(fetchUser).toHaveBeenCalledWith(1); }); }); // 正面教材2：使用间谍 import { getUserInfo } from './userService'; import { fetchUser } from './api'; describe('getUserInfo', () => { test('should call console.error when fetchUser fails', async () => { const mockError = new Error('Failed to fetch user'); const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(); fetchUser.mockRejectedValue(mockError); await expect(getUserInfo(1)).rejects.toThrow('Failed to fetch user'); expect(consoleErrorSpy).toHaveBeenCalledWith('Error fetching user:', mockError); consoleErrorSpy.mockRestore(); }); });

3.5 异步测试

// 反面教材：异步测试处理不当 // 没有使用 async/await 或 done 回调 test('should fetch user data', () => { fetchUser(1).then(user => { expect(user).toEqual({ id: 1, name: 'John Doe' }); }); }); // 正面教材：使用 async/await import { fetchUser } from './api'; describe('fetchUser', () => { test('should return user data', async () => { const mockUser = { id: 1, name: 'John Doe', email: 'john@example.com' }; global.fetch = jest.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve(mockUser), }); const user = await fetchUser(1); expect(user).toEqual(mockUser); expect(global.fetch).toHaveBeenCalledWith('/api/user/1'); }); test('should throw error when response is not ok', async () => { global.fetch = jest.fn().mockResolvedValue({ ok: false, }); await expect(fetchUser(1)).rejects.toThrow('Failed to fetch user'); }); test('should throw error when fetch fails', async () => { const mockError = new Error('Network error'); global.fetch = jest.fn().mockRejectedValue(mockError); await expect(fetchUser(1)).rejects.toThrow('Network error'); }); }); // 正面教材2：使用 done 回调 import { fetchUser } from './api'; describe('fetchUser', () => { test('should return user data', (done) => { const mockUser = { id: 1, name: 'John Doe', email: 'john@example.com' }; global.fetch = jest.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve(mockUser), }); fetchUser(1) .then(user => { expect(user).toEqual(mockUser); expect(global.fetch).toHaveBeenCalledWith('/api/user/1'); done(); }) .catch(done); }); });