JavaScript Mock测试

JavaScript Mock测试是一种在单元测试中模拟依赖对象行为的技术，用于隔离被测代码与外部系统（如API、数据库或第三方服务）的交互。通过创建模拟对象（Mock Objects），开发者可以控制测试环境，验证代码逻辑的正确性而无需依赖真实的外部资源。

核心概念[编辑 | 编辑源代码]

什么是Mock对象？[编辑 | 编辑源代码]

Mock对象是真实对象的仿制品，具有以下特征：

模拟真实对象的行为和接口
记录方法调用信息（调用次数、参数等）
可预定义返回值或抛出异常
不包含实际业务逻辑

为什么需要Mock测试？[编辑 | 编辑源代码]

在测试驱动开发(TDD)中，Mock测试解决了以下问题：

隔离性：避免测试受外部系统不稳定性的影响
确定性：提供可控的测试环境
速度：比真实依赖执行更快
验证：可断言交互行为是否符合预期

主要实现方式[编辑 | 编辑源代码]

手动Mock[编辑 | 编辑源代码]

最简单的实现方式是手动创建模拟对象：

// 真实服务
class PaymentService {
  process(amount) {
    // 实际支付逻辑
  }
}

// 手动Mock
const mockPaymentService = {
  calls: [],
  process(amount) {
    this.calls.push(amount);
    return amount < 1000; // 模拟业务规则
  }
};

// 测试用例
function testSmallPayment() {
  mockPaymentService.calls = []; // 重置调用记录
  const result = mockPaymentService.process(999);
  console.assert(result === true, "小额支付应成功");
  console.assert(mockPaymentService.calls.length === 1, "应调用1次");
}

使用Mocking库[编辑 | 编辑源代码]

主流JavaScript测试框架通常提供Mock功能：

常见Mock库对比
库名称	特点	典型用法
Jest	内置Mock系统	`jest.fn()`
Sinon.JS	独立Mock库	`sinon.stub()`
testdouble	严格Mock	`td.function()`

Jest Mock示例[编辑 | 编辑源代码]

基本用法[编辑 | 编辑源代码]

// 模拟函数
const mockFn = jest.fn();

// 设置返回值
mockFn.mockReturnValue(42);
console.log(mockFn()); // 输出: 42

// 验证调用
console.assert(mockFn.mock.calls.length === 1);

模块Mock[编辑 | 编辑源代码]

// api.js
export const fetchData = () => { /* 真实实现 */ };

// test.js
jest.mock('./api'); // 自动mock整个模块

import { fetchData } from './api';
fetchData.mockResolvedValue({ data: 'test' });

test('模拟API调用', async () => {
  const result = await fetchData();
  expect(result).toEqual({ data: 'test' });
});

高级模式[编辑 | 编辑源代码]

Mock实现[编辑 | 编辑源代码]

可以提供自定义实现替代简单返回值：

const mockFn = jest.fn((a, b) => a + b);
console.log(mockFn(2, 3)); // 输出: 5

时序控制[编辑 | 编辑源代码]

模拟异步行为：

// 模拟延迟响应
mockFn.mockImplementation(() => {
  return new Promise(resolve => {
    setTimeout(() => resolve('done'), 1000);
  });
});

交互验证[编辑 | 编辑源代码]

实际应用案例[编辑 | 编辑源代码]

场景：用户注册流程[编辑 | 编辑源代码]

需要测试用户注册逻辑而不实际发送邮件：

// 真实邮件服务
class EmailService {
  sendWelcomeEmail(user) { /* 实际实现 */ }
}

// 测试用例
test('注册后应发送欢迎邮件', () => {
  // 创建Mock
  const mockEmailService = {
    sentEmails: [],
    sendWelcomeEmail(user) {
      this.sentEmails.push(user);
    }
  };

  // 注入Mock
  const userManager = new UserManager(mockEmailService);
  userManager.register('test@example.com');

  // 验证交互
  expect(mockEmailService.sentEmails).toContainEqual(
    expect.objectContaining({ email: 'test@example.com' })
  );
});