Stub用于预设返回值以替代依赖，Mock则记录调用行为用于验证；Jest中通过jest.fn()创建Stub并用.mockReturnValue()设定值，结合.mockResolvedValue()等可模拟异步响应，使用toHaveBeenCalledTimes()、toHaveBeenCalledWith()等断言交互行为，jest.mock()可自动Mock整个模块，实现高效隔离测试。
在前端单元测试中，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免费学习笔记（深入）”；
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，能让前端单元测试更专注、更可靠。
