测试实践：Jest单元测试与Mock技巧-js教程-PHP中文网

测试实践：Jest单元测试与Mock技巧

夜晨

发布： 2025-11-20 18:51:05

原创

570人浏览过

Jest因其内置断言、模块模拟、快照测试、并行执行和覆盖率报告等特性成为前端单元测试首选。示例展示加法函数测试中使用describe、test和expect进行基本验证，toBe用于严格相等，toEqual用于深度比较。通过jest.fn()可mock函数调用，jest.mock()隔离模块依赖，如模拟API返回值并验证参数传递。实际应用建议对不可控外部依赖进行mock，避免副作用，结合beforeEach重置状态，提升测试稳定性和可维护性。

测试实践：jest单元测试与mock技巧

在前端开发中，确保代码质量离不开单元测试。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 用于对象或数组深度比较。

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

Mock 函数与模块

当测试涉及外部依赖如 API 调用、数据库操作或第三方库时，应使用 mock 避免副作用。

mock 函数行为：jest.fn() 创建监听函数，可验证调用次数、参数等。
模拟返回值：使用 mockReturnValue 或 mockResolvedValue（异步）。
自动模拟模块：通过 jest.mock('module-name') 替换整个模块。

示例：mock 一个 API 请求函数

// 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');
});

登录后复制