Jest 微测试中的 Mock 及 Spy

在前端开发中，编写自动化测试是非常重要的一个环节。Jest 是目前比较常用的一款 JavaScript 测试框架。它不仅具有简洁明了的 API，而且功能强大，支持模拟（mocking）、监视（spy）等特性，可以让我们更加轻松地编写测试用例。

在本文中，我们将讨论 Jest 中的 Mock 和 Spy，以及如何使用它们来编写高质量的测试用例。

Mock

Mock 是一个模拟对象，它可以在测试用例中替换掉真正的对象。Mock 对象通常只是用来占位，模拟函数的返回值和行为，以使我们的测试用例能够独立运行，不受外部因素的影响。

下面是一个简单的例子，我们将通过 Mock 来模拟一个函数的返回值：

// 文件名: index.js

export function fetchData(callback) {
  setTimeout(() => {
    callback('fetch data');
  }, 1000);
}

// 文件名: index.test.js

import { fetchData } from './index';

test('fetchData should return the mock data', () => {
  const mockCallback = jest.fn((data) => data);
  fetchData(mockCallback);

  expect(mockCallback).toHaveBeenCalledWith('fetch data');
});

在上面的测试用例中，我们使用了 Jest 的 jest.fn API 来创建 Mock 函数 mockCallback，并将其传递给 fetchData 函数。当 fetchData 函数执行后，Mock 函数会被调用，并将参数 'fetch data' 传入其中。最后，我们通过 toHaveBeenCalledWith 断言方法来验证 Mock 函数是否被正确调用。

Spy

Spy 是一个监视对象，它可以帮助我们监视函数的所有调用和参数。Spy 对象可以用于检测一个特定函数是否被调用，以及被调用的次数、参数等信息。与 Mock 不同，Spy 对象不会模拟函数的返回值，它只是一个被监视的对象。

下面是一个监视 fetchData 函数的例子：

// 文件名: index.js

export function fetchData(callback) {
  setTimeout(() => {
    callback('fetch data');
  }, 1000);
}

// 文件名: index.test.js

import { fetchData } from './index';

test('fetchData should be called one time', () => {
  const mockCallback = jest.fn((data) => data);
  const spyFetchData = jest.spyOn(fetchData, 'fetchData');
  fetchData(mockCallback);

  expect(mockCallback).toHaveBeenCalledWith('fetch data');
  expect(spyFetchData).toHaveBeenCalledTimes(1);
});

在上面的测试用例中，我们使用了 Jest 的 jest.spyOn API 来监视 fetchData 函数，然后通过 toHaveBeenCalledTimes 断言方法来验证函数被调用一次。

总结

Jest 的 Mock 和 Spy 功能是测试用例编写中非常有用的工具，它们可以帮助我们独立测试每一个单元，并且可以模拟测试环境中的所有内容。Mock 和 Spy 简单易用，通过使用它们来编写测试用例，可以将我们的代码测试覆盖率提高到最大程度。

希望通过本文的介绍，你能够更好的使用 Jest 中的 Mock 和 Spy，更好地编写高质量的测试用例。

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