Jest是前端流行的JavaScript测试框架，具备零配置、内置断言、快速执行、覆盖率报告和快照测试等优势。通过npm test可运行基础测试，使用expect与匹配器如.toBe、.toEqual验证结果，支持异步代码测试与jest.fn()、jest.mock()模拟函数和模块，结合--coverage生成覆盖率报告并设阈值，强调测试独立性与mock清理，提升项目质量与维护性。
单元测试是保证代码质量的重要手段，而Jest 是目前前端领域最受欢迎的 JavaScript 测试框架之一。它由 Facebook 开发并维护，具备开箱即用、配置简单、功能强大等优点，特别适合 React 项目，也广泛用于 Node.js 和普通 JS 应用中。本文将带你从零开始掌握 Jest 的核心用法，并应用于实际开发场景。
为什么选择 Jest？
Jest 能迅速流行起来，离不开以下几个关键特性：
- 零配置启动：安装后无需复杂配置即可运行测试。
- 内置断言库和测试工具：自带 expect 断言、spy、mock 功能，无需额外引入 Chai 或 Sinon。
- 快速并行执行：每个测试文件在独立进程中运行，提升速度。
- 优秀的覆盖率报告：通过 --coverage 参数一键生成详细覆盖情况。
- 快照测试支持：适用于 UI 组件或复杂数据结构的测试。
快速上手：第一个 Jest 测试
假设你有一个简单的加法函数：
function sum(a, b) {return a + b;
}
module.exports = sum;
对应的测试文件（sum.test.js）如下：
const sum = require('./sum');test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
在 package.json 中添加脚本：
"scripts": {"test": "jest"
}
运行 npm test，你会看到测试通过的信息。这就是最基础的 Jest 使用流程。
常用测试语法与匹配器
Jest 使用 expect 配合 matcher（匹配器）来验证结果。常见的 matcher 包括：
- .toBe(value)：严格相等（===），适合原始类型。
- .toEqual(value)：深度比较对象或数组内容。
- .toBeDefined() / .toBeUndefined()：检查是否已定义。
- .toBeTruthy() / .toBeFalsy()：判断真假值。
- .toContain(item)：检查数组或字符串是否包含某项。
- .toThrow()：验证函数是否抛出异常。
例如：
test('throws on invalid input', () => {expect(() => sum('a', 'b')).toThrow();
});
Mock 函数与模块模拟
在真实项目中，我们常需要隔离外部依赖，比如 API 请求、定时器或第三方模块。Jest 提供了强大的 mock 支持。
比如有一个调用 fetchUser 的函数：
function getUser(id, callback) {
fetchUser(id).then(data => callback(data));
}
你可以 mock fetchUser 模块：
jest.mock('./fetchUser');test('calls callback with user data', async () => {
const mockCallback = jest.fn();
const fakeData = { id: 1, name: 'John' };
require('./fetchUser').mockResolvedValue(fakeData);
await getUser(1, mockCallback);
expect(mockCallback).toHaveBeenCalledWith(fakeData);
});
这里使用了 jest.fn() 创建一个监听函数，可以追踪调用次数、参数等信息。
异步代码测试
处理 Promise 或 async/await 函数时，测试写法略有不同。
示例函数：
async function fetchData() {const res = await fetch('/api/data');
return res.json();
}
测试方式：
test('fetches data successfully', async () => {jest.spyOn(global, 'fetch').mockResolvedValue({
json: jest.fn().mockResolvedValue({ message: 'hello' })
});
const data = await fetchData();
expect(data.message).toBe('hello');
global.fetch.mockRestore();
});
注意：使用 spyOn 模拟全局 fetch 后，记得在最后 restore 原始实现，避免影响其他测试。
覆盖率报告生成
运行以下命令生成覆盖率报告：
npm test -- --coverageJest 会在根目录生成 coverage 文件夹，打开 index.html 可查看每行代码的覆盖情况。你可以设置最小覆盖率阈值防止质量下降：
// package.json"jest": {
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 90,
"lines": 90,
"statements": 90
}
}
}
基本上就这些。Jest 的设计目标就是让测试变得简单可靠。只要坚持写测试，配合合理的 mock 和断言，就能显著提升项目的可维护性和稳定性。不复杂但容易忽略的是：保持测试的独立性、避免副作用、及时清理 mock。做到这些，你的测试才是可持续的。
