如何利用JavaScript进行前端单元测试的Mock与Stub？-js教程-PHP中文网

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

betcha

发布： 2025-10-05 08:37:02

原创

968人浏览过

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 响应：

立即学习“Java免费学习笔记（深入）”；

青柚面试

简单好用的日语面试辅助工具

查看详情

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？的详细内容，更多请关注php中文网其它相关文章！