首页 > 文章 > 前端

JavaScript单元测试Mock与Stub实用技巧

时间：2025-10-01 16:57:31 192浏览收藏

前端单元测试是保证代码质量的关键环节。本文深入探讨了 JavaScript 前端单元测试中 Mock 和 Stub 的应用技巧，结合 Jest 框架，详细讲解如何通过 `jest.fn()` 创建 Stub 预设返回值，以及利用 `.mockReturnValue()`、`.mockResolvedValue()` 等方法模拟异步响应。同时，阐述了 Mock 的重要作用，即通过记录调用行为，使用 `toHaveBeenCalledTimes()`、`toHaveBeenCalledWith()` 等断言函数执行过程，验证交互行为的正确性。此外，还介绍了 `jest.mock()` 自动 Mock 整个模块的方法，实现高效的隔离测试，避免对外部依赖的真实调用。掌握 Mock 与 Stub 的使用，能有效提高前端单元测试的稳定性和可维护性，让测试更加专注可靠。

Stub用于预设返回值以替代依赖，Mock则记录调用行为用于验证；Jest中通过jest.fn()创建Stub并用.mockReturnValue()设定值，结合.mockResolvedValue()等可模拟异步响应，使用toHaveBeenCalledTimes()、toHaveBeenCalledWith()等断言交互行为，jest.mock()可自动Mock整个模块，实现高效隔离测试。

如何利用JavaScript进行前端单元测试的Mock与Stub？

在前端单元测试中，Mock 和 Stub 是隔离依赖、提高测试稳定性和可维护性的关键手段。JavaScript 生态提供了多种方式实现它们，尤其结合测试框架如 Jest 或 Mocha，能更高效地模拟函数行为和外部依赖。

什么是 Mock 与 Stub？

Stub 是预设了返回值的替代函数，用来“假装”某个方法已执行并返回期望结果，不关心调用细节。适合替换纯依赖，比如 API 请求或工具函数。

Mock 不仅能返回预设值，还能记录调用情况，比如是否被调用、调用了几次、传入了什么参数。适合验证交互行为，常用于断言函数执行过程。

使用 Jest 实现 Stub

Jest 内置支持函数替换，可以轻松创建 Stub。

用 jest.fn() 创建一个基础 Stub 函数
通过 .mockReturnValue() 设定返回值
替换目标模块中的方法

例如，有一个工具函数 fetchUser 依赖外部 API：

function fetchUser(id) {
return api.getUser(id);
}

测试时可以用 Stub 模拟 API 响应：

test('返回用户数据', () => {
  const mockApi = {
    getUser: jest.fn().mockReturnValue({ id: 1, name: 'Alice' })
  };
  // 替换依赖
  const result = mockApi.getUser(1);
  expect(result.name).toBe('Alice');
  expect(mockApi.getUser).toHaveBeenCalledWith(1);
});

使用 Mock 验证函数调用行为

Mock 更强调“行为验证”。比如你希望确认某个回调被正确触发。

test('按钮点击触发事件', () => {
  const handleClick = jest.fn();
  const button = document.createElement('button');
  button.addEventListener('click', handleClick);
  // 模拟点击
  button.click();
  expect(handleClick).toHaveBeenCalledTimes(1);
});

这里 jest.fn() 不仅充当监听器，还记录了调用次数，完成行为断言。

自动 Mock 模块（如第三方库）

对于外部依赖如 axios 或 lodash，可用 jest.mock() 自动将整个模块转为 Mock。

jest.mock('axios');

test('请求用户信息', async () => {
  const axios = require('axios');
  axios.get.mockResolvedValue({ data: { id: 1, name: 'Bob' } });
  const user = await fetchUserFromAPI(1);
  expect(user.name).toBe('Bob');
  expect(axios.get).toHaveBeenCalledWith('/api/users/1');
});

这样无需真实网络请求，也能测试异步逻辑。

基本上就这些。合理使用 Stub 返回数据，用 Mock 验证行为，配合 Jest 的 API，能让前端单元测试更专注、更可靠。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript单元测试Mock与Stub实用技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。