Jest因其内置断言、模块模拟、快照测试、并行执行和覆盖率报告等特性成为前端单元测试首选。示例展示加法函数测试中使用describe、test和expect进行基本验证，toBe用于严格相等，toEqual用于深度比较。通过jest.fn()可mock函数调用，jest.mock()隔离模块依赖，如模拟API返回值并验证参数传递。实际应用建议对不可控外部依赖进行mock，避免副作用，结合beforeEach重置状态，提升测试稳定性和可维护性。
在前端开发中，确保代码质量离不开单元测试。Jest 是目前最流行的 JavaScript 测试框架之一，开箱即用、API 简洁，非常适合 React、Vue 或 Node.js 项目。结合 Mock 技术，可以有效隔离外部依赖，提升测试的稳定性和可维护性。
为什么使用 Jest？
Jest 提供了完整的测试解决方案：
- 自带断言库：expect API 清晰直观，比如 toBe、toEqual、toBeCalled 等。
- 自动模块模拟：支持对 CommonJS 和 ES 模块进行模拟。
- 快照测试：适用于 UI 组件输出结构验证。
- 并行执行：默认并发运行测试用例，速度快。
- 覆盖率报告：内置 --coverage 参数生成详细覆盖率数据。
基本测试结构与断言
一个典型的 Jest 测试用例包含 describe、it/test 和 expect 断言。
示例：测试一个加法函数
function add(a, b) {
return a + b;
}
describe('add function', () => {
test('should return sum of two numbers', () => {
expect(add(2, 3)).toBe(5);
});
test('should handle negative numbers', () => {
expect(add(-1, 1)).toBe(0);
});
});
这里 toBe 使用严格相等（===），而 toEqual 用于对象或数组深度比较。
Mock 函数与模块
当测试涉及外部依赖如 API 调用、数据库操作或第三方库时，应使用 mock 避免副作用。
- mock 函数行为：jest.fn() 创建监听函数，可验证调用次数、参数等。
- 模拟返回值：使用 mockReturnValue 或 mockResolvedValue（异步）。
- 自动模拟模块：通过 jest.mock('module-name') 替换整个模块。
// api.js
export const fetchUser = async (id) => {
const res = await fetch(`/api/users/${id}`);
return res.json();
};
// __tests__/api.test.js
import { fetchUser } from '../api';
jest.mock('../api', () => ({
fetchUser: jest.fn(),
}));
test('fetchUser should be called with correct ID', async () => {
fetchUser.mockResolvedValue({ id: 1, name: 'John' });
const user = await fetchUser(1);
expect(fetchUser).toHaveBeenCalledWith(1);
expect(user.name).toBe('John');
});
实际应用场景建议
在真实项目中，合理使用 Mock 可显著提高测试效率。
- 对于工具函数，直接测试逻辑，无需 mock。
- 组件测试中，对 history.push、localStorage 等全局对象进行 mock。
- 避免过度 mock，只 mock 不可控或有副作用的部分。
- 使用 beforeEach 重置 mock 状态，防止状态污染。
基本上就这些。掌握 Jest 的基础写法和 mock 技巧，能让你写出更可靠、易维护的测试代码。关键是理解何时该测真实逻辑，何时该隔离依赖。不复杂但容易忽略细节。
