在现代前端开发的演进历程中，我们经常面临这样一个核心挑战：随着应用规模的指数级增长，如何确保新添加的功能没有破坏旧代码？在微前端和 Serverless 架构普及的今天，如何让我们在重构代码时充满信心而不是提心吊胆？这就需要我们引入自动化测试。今天，我们将深入探讨由 Facebook 开发并持续演进的 JavaScript 测试框架——Jest。它不仅因为简洁、高效而广受欢迎，更是 React 生态系统中默认的测试利器。在这篇文章中，我们将不仅学习如何安装和配置 Jest，还会结合 2026 年最新的开发理念，通过实际的代码示例，一起探索单元测试、异步代码测试以及 Jest 强大的模拟功能，帮助你构建更加健壮的应用。
目录
为什么选择 Jest？
在开始编码之前，让我们先聊聊为什么我们（以及无数的开发团队）在 2026 年依然选择 Jest 作为首选方案。市面上有 Vitest、Jasmine、Mocha 等优秀的测试框架，但 Jest 之所以能在激烈的技术竞争中脱颖而出，主要归功于以下几个核心优势：
- 零配置体验与现代化集成：我们通常讨厌繁琐的配置工作。Jest 开箱即用，它内置了断言库、Mock 功能以及测试运行器。在 2026 年，它与 Vite、Turbopack 等现代构建工具的集成已经达到了“丝滑”的程度，几乎不需要我们在选择和组合各种插件上浪费时间。
- 快照测试与 UI 回归检测：这对于 React/Vue/Solid 开发者来说是神器。它可以记录组件的渲染输出，并在未来的测试中对比是否有变化。配合现在的 AI 辅助代码审查，快照测试能极大地简化 UI 测试的维护成本。
- 强大的 Mock 功能与模块隔离：在单元测试中，我们需要隔离被测试的代码。Jest 提供了非常完善的 Mock 机制，可以轻松地模拟函数、模块甚至第三方 API 的调用。这对于屏蔽后端微服务的不确定性至关重要。
- 并行测试与性能优化：为了节省时间，Jest 会智能地并行运行测试用例。在大规模项目中，结合 CI/CD 管道的水平扩展，这能显著提升测试速度，将反馈周期从“喝杯咖啡的时间”缩短到“秒级”。
准备工作：安装与环境配置
让我们开始动手吧。首先，我们需要创建一个新的项目目录（或者在你现有的项目中操作）。为了演示，我们假设你正在一个新的文件夹中工作。在 2026 年，我们更倾向于使用原生的 ESM 模块或 TypeScript。
1. 初始化项目并安装 Jest
打开你的终端，运行以下命令来初始化一个新的 package.json 文件（如果还没有的话）：
npm init -y
接下来，我们将 Jest 安装为开发环境依赖项。这意味着 Jest 只在开发阶段使用，不会被部署到生产环境。
npm install --save-dev jest
> 实用见解：如果你是使用 INLINECODEa55cddf2 或 INLINECODE01d26995 创建的现代项目，Jest 或其替代品（如 Vitest）通常已经预装。对于需要极致性能的现代项目，我们通常还会安装 INLINECODE7c13aa9a 或 INLINECODE3a3ea07b 来利用 Rust 编译器的速度优势。
2. 配置测试脚本
安装完成后，为了方便我们运行测试，需要在 INLINECODE693e9db4 文件中添加一个测试脚本。打开该文件，找到 INLINECODE12561658 部分，修改或添加如下内容：
{
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
}
}
现在，我们可以通过在终端运行 INLINECODE63202fdd 来启动 Jest。默认情况下，Jest 会查找项目中匹配特定模式的文件（如 INLINECODEbb9e1014 或 INLINECODE27f93d8e）并执行它们。添加 INLINECODE0af6852a 参数后，Jest 会在文件变化时自动重新运行相关测试，这是 TDD（测试驱动开发）的核心工作流。
编写我们的第一个 Jest 测试
让我们从最简单的“Hello World”级别的测试开始。Jest 让编写测试变得非常直观，几乎就像在用自然语言描述你的预期一样。
场景：测试一个简单的求和函数
假设我们在 math.js 文件中有一个简单的加法函数。这个例子虽然简单，但它是所有复杂逻辑的基础。
文件：math.js
// math.js
// 这是一个简单的求和函数，接收两个参数并返回它们的和
function sum(a, b) {
return a + b;
}
// 将函数导出，以便在其他文件（测试文件）中引入
// 在 2026 年的项目中，我们可能会使用 ES6 的 export 语法
module.exports = sum;
接下来，我们在同一目录下创建一个名为 INLINECODE873fc0be 的文件。注意这个 INLINECODEe368a005 后缀，Jest 就是靠它来识别测试文件的。
文件：math.test.js
// math.test.js
// 引入我们要测试的函数
const sum = require(‘./math.js‘);
// test() 函数用于定义一个测试用例
// 第一个参数是测试描述，第二个参数是包含测试逻辑的函数
test(‘测试 1 加 1 是否等于 2‘, () => {
// expect(sum(1, 1)) 返回一个“期望”对象
// .toBe(2) 是一个匹配器，用于判断实际值是否严格等于 2
expect(sum(1, 1)).toBe(2);
});
test(‘测试任意两个数的和‘, () => {
expect(sum(10, 20)).toBe(30);
});
// 让我们尝试一个反向的测试，确保它不会通过错误的值
test(‘测试 2 加 2 不应该等于 5‘, () => {
expect(sum(2, 2)).not.toBe(5);
});
运行 INLINECODE944b6dd2，你会看到控制台输出绿色的通过信息。如果我们将 INLINECODE8ca24e3a 改为 toBe(3)，Jest 会报错并详细显示预期值和实际值的差异。
深入理解匹配器
在上面的例子中，我们使用了 .toBe()。在 Jest 中，匹配器是用来验证值是否符合预期的工具。掌握这些匹配器是编写高效测试的关键。
- INLINECODE7e21974a：用于严格相等比较（类似于 INLINECODE78e23ee1）。适用于数字、字符串或布尔值。
-
.toEqual(value)：用于深度递归比较对象或数组。这对于测试复杂的 JSON 响应非常有用。 - INLINECODE545a2e00 / INLINECODEe62a4433：用于检查布尔真值，无需显式比较。
-
.toMatchObject(obj)：这是一个进阶匹配器，用于检查对象是否包含指定的子集，这在 2026 年处理大型 API 响应时特别有用。
示例：测试对象
// user.js
function getUser() {
return {
id: ‘user-123‘,
name: ‘Alice‘,
age: 25,
preferences: {
theme: ‘dark‘
}
};
}
module.exports = getUser;
// user.test.js
const getUser = require(‘./user‘);
test(‘返回的用户对象应该包含正确的属性‘, () => {
const user = getUser();
// 注意：这里要用 toEqual 而不是 toBe，因为对象引用不同
expect(user).toEqual({ id: ‘user-123‘, name: ‘Alice‘, age: 25, preferences: { theme: ‘dark‘ } });
});
test(‘用户对象应该匹配部分结构（使用 toMatchObject）‘, () => {
const user = getUser();
// 只检查我们关心的字段，忽略其他字段
expect(user).toMatchObject({
name: ‘Alice‘,
preferences: { theme: ‘dark‘ }
});
});
进阶挑战：测试异步代码
在现代 Web 开发中，我们几乎每天都要处理异步操作，比如从服务器获取数据。如果不处理异步，测试可能会在数据返回之前就结束，导致误判（即“假阳性”）。Jest 为此提供了多种优雅的解决方案。
场景：模拟数据获取
让我们创建一个模拟 API 请求的函数，它返回一个 Promise。
文件：api.js
// api.js
// 模拟一个异步获取用户数据的函数
function fetchUser() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ id: 1, name: ‘Geek‘, role: ‘Admin‘ });
}, 1000); // 模拟 1 秒的网络延迟
});
}
module.exports = fetchUser;
方法 1：使用 Async/Await (推荐)
这是最现代、最易读的方式。我们可以直接在测试回调函数前加上 INLINECODE8d74363f 关键字，并在 Promise 调用前加上 INLINECODEad0b98f4。这种方式让测试代码看起来几乎像同步代码，极大地提高了可读性。
文件：api.test.js
// api.test.js
const fetchUser = require(‘./api‘);
// 注意 test 函数前的 async 关键字
test(‘异步获取用户数据‘, async () => {
// 我们可以设置更长的超时时间，如果网络模拟较慢
// jest.setTimeout(3000);
const data = await fetchUser(); // 等待 Promise 解析
// 验证返回的数据结构
expect(data).toEqual({ id: 1, name: ‘Geek‘, role: ‘Admin‘ });
expect(data.name).toBe(‘Geek‘);
});
方法 2：处理错误情况
在生产环境中，我们必须处理请求失败的情况。Jest 提供了 .rejects 匹配器来简化这一过程。
// api.js (添加失败情况)
function fetchBrokenUser() {
return new Promise((_, reject) => {
setTimeout(() => {
reject(new Error(‘Network Error‘));
}, 1000);
});
}
// api.test.js
test(‘异步请求应该能正确捕获错误‘, async () => {
// expect 返回的 Promise 如果被拒绝，会匹配 toThrow 中的错误信息
await expect(fetchBrokenUser()).rejects.toThrow(‘Network Error‘);
});
强大功能：模拟与隔离测试
在实际开发中，我们可能会遇到这样的情况：我们要测试的函数依赖于一个第三方 API（比如支付网关或数据库），但在测试环境中，我们并不想真的去调用这些昂贵或不稳定的服务。这时，我们就需要用到 Mock（模拟）。
Mock 允许我们拦截函数调用并提供预设的返回值，从而确保测试是在受控的环境下运行。这也是我们在开发中实现“并行开发”和“解耦”的关键手段。
场景：Mock 外部模块
假设我们有一个应用，它会调用一个工具函数来获取电子邮件。
文件：emailService.js
// emailService.js
// 这是一个外部服务模块
function fetchEmail() {
// 这里可能是真实的网络请求逻辑
// 或者调用昂贵的 AWS SES 服务
return ‘[email protected]‘;
}
module.exports = fetchEmail;
文件：app.js (被测文件)
// app.js
const fetchEmail = require(‘./emailService‘);
function getUserEmail() {
const email = fetchEmail();
return `User email is: ${email}`;
}
module.exports = getUserEmail;
文件：app.test.js
// app.test.js
const getUserEmail = require(‘./app‘);
const fetchEmail = require(‘./emailService‘);
// 告诉 Jest：我们要自动模拟 ‘./emailService‘ 模块
jest.mock(‘./emailService‘);
// 在测试用例中指定 mock 的行为
beforeEach(() => {
// 每次测试前，我们设置 mock 函数的返回值
// 这样无论真实代码如何，我们都让它返回 ‘[email protected]‘
fetchEmail.mockReturnValue(‘[email protected]‘);
});
// 测试完成后清除 mock 数据，防止污染其他测试
afterEach(() => {
jest.clearAllMocks();
});
test(‘getUserEmail 应该拼接模拟的邮箱地址‘, () => {
const result = getUserEmail();
// 因为我们 mock 了 fetchEmail，所以这里不会返回真实邮箱
expect(result).toBe(‘User email is: [email protected]‘);
});
// 我们也可以测试函数被调用了多少次
test(‘fetchEmail 应该被调用一次‘, () => {
getUserEmail();
expect(fetchEmail).toHaveBeenCalledTimes(1);
expect(fetchEmail).toHaveBeenCalledWith(); // 确认没有传递参数
});
通过这种方式，我们完全隔离了 INLINECODE1e5b1e47 的影响。即使 INLINECODEce3dfadc 所在的服务器挂了，或者我们还没有开发好这个服务，我们的测试依然能够通过，因为 getUserEmail 的逻辑是正确的。
2026 年趋势：AI 辅助测试与工程化深度
随着我们进入 2026 年，测试的角色正在从单纯的“验证”转向“规范生成”。我们在最近的项目中发现，结合 AI 工具（如 GitHub Copilot、Cursor 或 Windsurf）可以极大地提升测试效率。
1. Vibe Coding（氛围编程）与 TDD
在现代 IDE 中，我们可以尝试一种新的工作流：先写测试，再让 AI 补全代码。
- 传统方式：写逻辑 -> 写测试 -> 修 Bug。
- 现代 Vibe Coding：写详细的测试用例（描述行为） -> 让 AI 阅读测试并生成实现代码 -> 如果测试通过，代码即完成。
这种“测试先行”的理念在 AI 时代变得极其强大，因为 AI 非常擅长根据断言来推导出满足条件的函数逻辑。你可以试着让 AI 根据你写的 Jest 测试来生成代码，你会发现这种反馈循环非常令人上瘾。
2. 覆盖率与可观测性
仅仅编写测试是不够的，我们还需要知道测试覆盖了多少代码。在 CI/CD 流水线中，我们通常会强制要求覆盖率报告。
运行以下命令生成覆盖率报告：
npm test -- --coverage
这会生成一个输出表格，展示语句覆盖率、分支覆盖率、函数覆盖率和行覆盖率。在 2026 年的企业级开发中，我们通常的目标是：
- 核心业务逻辑：100% 覆盖率。
- 工具函数：>90% 覆盖率。
- 边缘情况：即使覆盖率不高，也要有针对性的集成测试。
此外，现代测试实践强调结合 监控与可观测性。虽然 Jest 处理的是单元测试，但我们应确保这些测试与生产环境中的错误追踪（如 Sentry）保持一致。例如，我们可以 Mock Sentry 的捕获错误函数，并验证它在异常发生时确实被调用了。
3. 常见陷阱与性能陷阱
在大型项目中，如果不注意，测试套件可能会变得非常缓慢。以下是我们踩过的坑及解决方案：
- 全局泄漏：如果你在测试中修改了全局变量或 DOM，记得在
afterEach中清理。这会导致测试之间的“串味”，产生难以调试的 Bug。 - 过度的 Mock：虽然 Mock 很好，但过度的 Mock 会导致测试通过但实际应用无法运行（因为 Mock 的行为与真实 API 不符）。最佳实践：对于简单的工具函数，尽量使用真实实现；只在涉及外部网络、数据库或耗时操作时才使用 Mock。
- 异步超时：默认 Jest 的超时时间是 5 秒。如果在 CI 环境中资源受限，某些测试可能会超时失败。我们可以通过
jest.setTimeout(10000)增加特定测试的超时时间，或者优化代码逻辑以加快执行速度。
总结与后续步骤
在这篇文章中，我们从零开始，搭建了 Jest 环境，编写了第一个单元测试，掌握了处理异步代码的艺术，并学习了如何使用 Mock 来隔离外部依赖。掌握这些技能，已经足以覆盖大部分 JavaScript 应用的测试需求。
测试不仅仅是保证代码正确的手段，更是一种设计工具。正如 Kent C. Dodds 所说：“测试的越多，你的开发速度就越快。”当你开始编写测试时，你会发现自己编写的代码变得更加模块化、更易于维护，也更敢于进行大规模重构。
作为接下来的挑战，我建议你尝试以下几点：
- 学习快照测试：如果你在开发 React 应用，尝试使用
toMatchSnapshot()来测试组件渲染。这是防止 UI 意外改动的最后一道防线。 - 集成测试：尝试使用 Supertest 或 Playwright 配合 Jest，从单纯的单元测试走向集成测试，验证整个用户流程是否通畅。
- 配置 CI/CD：探索如何将 GitHub Actions 或 GitLab CI 与 Jest 结合，实现代码提交时自动运行测试并报告覆盖率。
希望这篇文章能帮助你更好地理解和使用 Jest。现在，打开你的编辑器，为你关心的代码编写第一个测试用例吧！