Jest 测试中的 Mock 和 Spy：什么时候使用什么？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要编写单元测试来确保代码的正确性和稳定性。在 Jest 测试框架中，Mock 和 Spy 是两个非常重要的概念，它们可以帮助我们模拟函数和对象的行为，以便更好地测试代码。但是，什么时候应该使用 Mock，什么时候应该使用 Spy 呢？本文将详细介绍这两个概念的用法和区别。

Mock

Mock（模拟）是一种用于模拟函数和对象行为的技术。在 Jest 中，我们可以使用 jest.fn() 来创建一个 Mock 函数。Mock 函数可以替代原有的函数，以便在测试中更方便地控制函数的行为。

使用 Mock 的场景

当函数具有副作用时，需要使用 Mock 函数来避免对外部环境造成影响。例如，当函数需要发送请求或更改全局状态时，我们可以使用 Mock 函数来模拟这些行为。

// javascriptcn.com 代码示例
// 原有函数，会发送请求
function fetchData() {
  return axios.get('/api/data');
}

// 测试函数，使用 Mock 函数模拟请求
test('test fetchData', async () => {
  const mockAxios = jest.fn();
  mockAxios.mockResolvedValue({ data: 'test data' });

  axios.get = mockAxios;

  const data = await fetchData();
  expect(data).toEqual('test data');
});

当函数的返回值不稳定时，需要使用 Mock 函数来模拟不同的返回值。例如，当函数需要根据当前时间返回不同的结果时，我们可以使用 Mock 函数来模拟不同的时间。

// javascriptcn.com 代码示例
// 原有函数，返回当前小时数
function getCurrentHour() {
  return new Date().getHours();
}

// 测试函数，使用 Mock 函数模拟不同的时间
test('test getCurrentHour', () => {
  const mockDate = new Date('2022-01-01T12:00:00');
  const spyDate = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);

  expect(getCurrentHour()).toEqual(12);

  spyDate.mockRestore();

  const mockDate2 = new Date('2022-01-01T22:00:00');
  const spyDate2 = jest.spyOn(global, 'Date').mockImplementation(() => mockDate2);

  expect(getCurrentHour()).toEqual(22);

  spyDate2.mockRestore();
});

使用 Mock 的注意事项

在使用 Mock 函数时，需要确保 Mock 函数的行为与原有函数的行为一致，以便测试结果的准确性。
在每个测试用例中，需要使用 jest.clearAllMocks() 来清除所有 Mock 函数的调用信息，以便避免测试用例之间的干扰。

Spy

Spy（间谍）是一种用于监视函数调用的技术。在 Jest 中，我们可以使用 jest.spyOn() 来创建一个 Spy。Spy 可以监视函数的调用次数、调用参数和返回值等信息，以便更好地测试代码。

使用 Spy 的场景

当需要测试函数的调用次数时，可以使用 Spy 函数来监视函数的调用次数。

// javascriptcn.com 代码示例
// 原有函数
function getUserInfo(username) {
  // ...
}

// 测试函数，使用 Spy 函数监视函数的调用次数
test('test getUserInfo', () => {
  const spyGetUserInfo = jest.spyOn(api, 'getUserInfo');

  getUserInfo('testuser');
  expect(spyGetUserInfo).toHaveBeenCalledTimes(1);

  getUserInfo('testuser2');
  expect(spyGetUserInfo).toHaveBeenCalledTimes(2);

  spyGetUserInfo.mockRestore();
});

当需要测试函数的返回值时，可以使用 Spy 函数来监视函数的返回值。

// javascriptcn.com 代码示例
// 原有函数，返回两个数的和
function add(a, b) {
  return a + b;
}

// 测试函数，使用 Spy 函数监视函数的返回值
test('test add', () => {
  const spyAdd = jest.spyOn(utils, 'add');

  spyAdd.mockReturnValueOnce(3);
  expect(add(1, 2)).toEqual(3);

  spyAdd.mockReturnValueOnce(5);
  expect(add(2, 3)).toEqual(5);

  spyAdd.mockRestore();
});

使用 Spy 的注意事项

在使用 Spy 函数时，需要确保 Spy 函数的行为与原有函数的行为一致，以便测试结果的准确性。
在每个测试用例中，需要使用 spy.mockRestore() 来还原 Spy 函数的行为，以便避免测试用例之间的干扰。

总结

Mock 和 Spy 是两个非常重要的概念，它们在 Jest 测试框架中有着广泛的应用。Mock 函数可以帮助我们模拟函数和对象的行为，以便更好地测试代码；Spy 函数可以帮助我们监视函数的调用次数、调用参数和返回值等信息，以便更好地测试代码。在编写测试用例时，我们需要根据具体的场景选择使用 Mock 函数或 Spy 函数，以便更好地测试代码的正确性和稳定性。

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