在 Jest 中使用 fetch 模拟 API 请求进行单元测试

在前端开发中，单元测试是非常重要的一环，它能够帮助我们发现代码中的问题并且提高代码质量。在编写单元测试时，我们经常需要模拟 API 请求来测试代码的正确性。本文将介绍如何在 Jest 中使用 fetch API 来模拟 API 请求进行单元测试。

什么是 fetch API？

在介绍如何在 Jest 中使用 fetch API 之前，先来了解一下 fetch API 是什么。fetch API 是一种新的网络请求 API，它提供了一种简单、更灵活的方式来发送网络请求。fetch API 可以用于发送 HTTP 请求，也可以用于发送 HTTPS 请求。

fetch API 提供了一个全局的 fetch() 方法，该方法接受一个 URL 和一些可选的参数，然后返回一个 Promise 对象。fetch() 方法返回的 Promise 对象会在响应返回时解析为 Response 对象。

如何在 Jest 中使用 fetch API 进行单元测试？

在 Jest 中使用 fetch API 进行单元测试非常简单，我们只需要使用 Jest 提供的 mock API 来模拟 fetch() 方法的返回值即可。下面是一个示例代码：

// javascriptcn.com 代码示例
test('test fetch API', () => {
  const mockResponse = { foo: 'bar' };
  const mockJsonPromise = Promise.resolve(mockResponse);
  const mockFetchPromise = Promise.resolve({
    json: () => mockJsonPromise,
  });
  global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);

  // 使用 fetch API 发送网络请求
  fetch('https://example.com/api/data')
    .then(response => response.json())
    .then(data => {
      expect(data).toEqual(mockResponse);
    });
});

在上面的示例代码中，我们使用 Jest 提供的 mock API 来模拟 fetch() 方法的返回值。首先，我们定义了一个 mockResponse 对象，它是我们模拟的 API 返回值。然后，我们定义了两个 Promise 对象：mockJsonPromise 和 mockFetchPromise。mockJsonPromise 对象是用来模拟 response.json() 方法的返回值，而 mockFetchPromise 对象是用来模拟 fetch() 方法的返回值的。最后，我们使用 jest.fn() 方法来创建一个 mock 函数，然后使用 mockImplementation() 方法来指定 mock 函数的返回值为 mockFetchPromise 对象。这样，当我们在测试中调用 fetch() 方法时，就会返回我们预先定义的 mockResponse 对象了。

总结

本文介绍了如何在 Jest 中使用 fetch API 来模拟 API 请求进行单元测试。使用 fetch API 进行单元测试可以帮助我们测试代码的正确性，并且提高代码质量。在编写单元测试时，我们需要注意一些细节，比如如何模拟 fetch() 方法的返回值等。希望本文对大家有所帮助。

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