Jest 测试框架的 Mock 和 Spy 的差别和用法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试框架是不可或缺的工具之一。Jest 是一个被广泛使用的测试框架，它提供了很多方便的功能来测试代码的正确性。其中，Mock 和 Spy 是 Jest 中经常使用的两个概念。它们可以帮助我们轻松地模拟和监控函数的行为，以提高测试的质量和效率。但是 Mock 和 Spy 的用法和功能有所不同，下面我们来详细了解一下它们的差别和用法。

什么是 Mock 和 Spy？

Mock 和 Spy 都是 Jest 中的两个重要概念，它们可以对函数进行模拟和监控，并且可以设置函数的返回值、输出日志、抛出异常等。下面我们分别介绍一下它们的定义和用途。

Mock

Mock 是模拟函数的行为，可以替换原函数的实现，修改函数的返回值或输出等。在 Jest 中，我们可以使用 jest.fn() 来创建一个 Mock 函数。Mock 函数可以帮助我们模拟函数的行为，以提高测试的可靠性和复现性。例如，我们可以使用 Mock 函数来模拟对后端 API 的调用，以保证测试能够稳定运行，并且不会受到外部环境的影响。

// 创建一个 Mock 函数
const mockFunc = jest.fn();

// 设置 Mock 函数的返回值
mockFunc.mockReturnValue(42);

// 调用 Mock 函数
console.log(mockFunc()); // 输出 42

在上面的例子中，我们使用 jest.fn() 创建了一个 Mock 函数 mockFunc，然后使用 mockReturnValue() 设置了它的返回值为 42。最后，我们调用了 Mock 函数，并输出了它的返回值 42。

Spy

Spy 是监控函数的调用，记录函数的调用和参数等，并可以设置函数的输出和返回值。在 Jest 中，我们可以使用 jest.spyOn() 来创建一个 Spy。Spy 函数可以帮助我们监控函数的调用，以了解函数的行为和使用情况。例如，我们可以使用 Spy 函数来监控函数调用次数、参数和返回值等，以评估函数的质量和性能。

// javascriptcn.com 代码示例
// 定义一个普通函数
function normalFunc(x, y) {
  return x + y;
}

// 创建一个 Spy 函数
const spyFunc = jest.spyOn(global.console, 'log');

// 使用 Spy 函数调用普通函数
console.log(normalFunc(2, 3));

// 输出 Spy 函数的调用信息
console.log(spyFunc.mock.calls); // 输出 [[2, 3]]
console.log(spyFunc.mock.results); // 输出 [{ type: 'return', value: undefined }]

在上面的例子中，我们定义了一个普通函数 normalFunc，然后使用 jest.spyOn() 创建了一个 Spy 函数 spyFunc，监控了全局对象 console.log 的调用。接着，我们使用 Spy 函数来调用普通函数，并输出了 Spy 函数的调用信息。其中，mock.calls 记录了 Spy 函数的调用次数和参数，mock.results 记录了 Spy 函数的返回值和类型。

Mock 和 Spy 的用法和差别

Mock 和 Spy 都是 Jest 中重要的测试工具，它们的用途和差别如下：

用途

Mock：用于模拟函数的行为，替换函数的实现，修改函数的返回值或输出等。
Spy：用于监控函数的调用，记录函数的调用和参数等，并可以设置函数的输出和返回值。

差别

Mock：通常用于替换函数的实现，返回预置的值或数据，而不是真正的结果。Mock 函数可以不调用原函数，但是也可以用于测试原函数的调用情况。
Spy：通常用于记录函数的调用和参数，输出和返回值通常与原函数保持一致。Spy 函数必须调用原函数，以记录准确的调用情况和返回值。

总的来说，Mock 和 Spy 在测试中都有着非常重要的作用，具体的使用方式和场景，需要根据具体的开发需求和测试需求来确定。下面我们将结合示例代码，进一步说明 Mock 和 Spy 的使用方法和注意事项。

示例代码

下面是一个使用 Mock 和 Spy 测试的示例代码，它模拟了一个三方登录的功能，包括调用后端 API 和处理用户数据等。我们将分别使用 Mock 和 Spy 函数来测试该功能，看它们的表现和效果。

Mock 示例代码

// javascriptcn.com 代码示例
// 定义三方登录的功能
async function thirdPartyLogin(username, password) {
  try {
    const res = await fetch(`api/login?username=${username}&password=${password}`);
    const data = await res.json();
    return {
      id: data.id,
      username: data.username,
      email: data.email
    };
  } catch (e) {
    console.error(e);
    return null;
  }
}

// 定义测试用例
describe('thirdPartyLogin function', () => {
  test('returns user info with valid credentials', async () => {
    // 创建 Mock 函数
    const mockFetch = jest.fn();
    const mockJson = jest.fn();
    global.fetch = mockFetch;

    // 设置 Mock 函数返回的数据
    const mockData = { id: 1, username: 'test', email: 'test@example.com' };
    mockJson.mockResolvedValue(mockData);

    // 使用 Mock 函数测试
    mockFetch.mockResolvedValueOnce({ json: mockJson });
    const result = await thirdPartyLogin('test', 'password');

    // 断言 Mock 函数被调用
    expect(mockFetch).toHaveBeenCalledWith('api/login?username=test&password=password');
    expect(mockJson).toHaveBeenCalled();

    // 断言结果正确
    expect(result).toEqual(mockData);
  });

  test('returns null with invalid credentials', async () => {
    // 创建 Mock 函数
    const mockFetch = jest.fn();
    global.fetch = mockFetch;

    // 使用 Mock 函数测试
    mockFetch.mockRejectedValueOnce(new Error('Invalid credentials'));
    const result = await thirdPartyLogin('test', 'invalid');

    // 断言 Mock 函数被调用
    expect(mockFetch).toHaveBeenCalledWith('api/login?username=test&password=invalid');

    // 断言结果为空
    expect(result).toBeNull();
  });
});

在上面的代码中，我们使用 jest.fn() 来创建了两个 Mock 函数 mockFetch 和 mockJson，它们分别模拟了对后端 API 的调用和返回的 JSON 数据。接着，我们使用 mockResolvedValue() 和 mockRejectedValue() 分别设置了 Mock 函数的返回值，以模拟不同的结果。最后，我们分别调用了 getMock() 和 mockRejectedValue() 来测试了输入正确和错误的情况，在测试中使用 expect() 校验了 Mock 函数的调用和返回值，以及待测函数的正确性。

Spy 示例代码

// javascriptcn.com 代码示例
// 定义监听器函数
function logEvent(event, data) {
  console.log(`Event ${event} occurred with data ${JSON.stringify(data)}`);
}

// 定义测试用例
describe('logEvent function', () => {
  test('logs event with correct data', () => {
    // 创建 Spy 函数
    const spyLog = jest.spyOn(global.console, 'log');

    // 使用 Spy 函数测试
    logEvent('click', { x: 10, y: 20 });

    // 断言 Spy 函数被调用
    expect(spyLog).toHaveBeenCalledWith('Event click occurred with data {"x":10,"y":20}');
  });
});

在上面的代码中，我们使用 jest.spyOn() 创建了一个 Spy 函数 spyLog，监控了全局对象 console.log() 的调用。接着，我们调用了 logEvent() 函数，并输出了其中的参数。最后，我们使用 expect() 校验了 Spy 函数的调用和参数，并断言它与原函数的调用和参数相同。

总结

Mock 和 Spy 都是 Jest 中非常重要的测试工具，它们可以帮助我们轻松地模拟和监控函数的行为，以提高测试的质量和效率。使用 Mock 和 Spy 可以避免对实际函数的依赖，减少测试的复杂度和耦合性。在编写测试用例时，可以选择 Mock 函数进行模拟测试，也可以选择 Spy 函数进行监控测试，具体的选择方式需要根据具体的开发需求和测试需求来确定。最后，我们需要注意使用 Mock 和 Spy 的正确方法和注意事项，以避免测试的误差和错误。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651bd70495b1f8cacd373273