当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript前端Mock与Stub实战指南

JavaScript前端Mock与Stub实战指南

2025-10-10 21:42:52 0浏览收藏

## JavaScript前端Mock与Stub实战教程：提升单元测试效率与质量前端单元测试中，隔离依赖是关键。本文深入讲解JavaScript中Mock与Stub的实战应用，助你编写更稳定、可维护的测试代码。**Stub**用于预设返回值，模拟依赖项的行为，例如API请求或工具函数，无需关心调用细节。**Mock**则更进一步，不仅可以预设返回值，还能记录调用次数、参数等行为，用于验证交互逻辑。本文将结合Jest测试框架，详细介绍如何使用`jest.fn()`创建Stub，并利用`.mockReturnValue()`设定返回值，模拟异步响应。同时，学习如何使用`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学习网公众号！