JS测试框架实战_Jest单元测试指南-js教程-PHP中文网

JS测试框架实战_Jest单元测试指南

夜晨

发布： 2025-11-16 19:53:02

原创

144人浏览过

Jest是前端流行的JavaScript测试框架，具备零配置、内置断言、快速执行、覆盖率报告和快照测试等优势。通过npm test可运行基础测试，使用expect与匹配器如.toBe、.toEqual验证结果，支持异步代码测试与jest.fn()、jest.mock()模拟函数和模块，结合--coverage生成覆盖率报告并设阈值，强调测试独立性与mock清理，提升项目质量与维护性。

js测试框架实战_jest单元测试指南

单元测试是保证代码质量的重要手段，而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 的函数：

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

查看详情

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 -- --coverage

Jest 会在根目录生成 coverage 文件夹，打开 index.html 可查看每行代码的覆盖情况。你可以设置最小覆盖率阈值防止质量下降：

// package.json
"jest": {
  "coverageThreshold": {
    "global": {
      "branches": 80,
      "functions": 90,
      "lines": 90,
      "statements": 90
    }
  }
}

基本上就这些。Jest 的设计目标就是让测试变得简单可靠。只要坚持写测试，配合合理的 mock 和断言，就能显著提升项目的可维护性和稳定性。不复杂但容易忽略的是：保持测试的独立性、避免副作用、及时清理 mock。做到这些，你的测试才是可持续的。

以上就是JS测试框架实战_Jest单元测试指南的详细内容，更多请关注php中文网其它相关文章！