前言
在前端开发中，我们经常需要进行 API 请求，而在进行单元测试时，我们需要模拟这些 API 请求以确保代码的正确性。而 Jest 是一个流行的测试框架，它提供了 Jest Fetch Mock 插件来模拟 API 请求。本文将介绍如何在 Jest 中使用 Jest Fetch Mock 进行 API 请求模拟。
安装 Jest Fetch Mock
首先，我们需要安装 Jest Fetch Mock 插件。在命令行中运行以下命令：
npm install --save-dev jest-fetch-mock
编写测试用例
假设我们有一个 API 请求函数，它返回一个 Promise 对象，例如：
function fetchData() {
return fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// 处理数据
return data;
});
}我们需要测试这个函数的正确性，但是我们不希望实际发起网络请求。这时候，我们可以使用 Jest Fetch Mock 来模拟这个请求。
首先，在测试文件中引入 Jest Fetch Mock：
import fetchMock from 'jest-fetch-mock';
然后，在测试用例中，使用 fetchMock.mockResponse() 来模拟 API 请求的返回结果：
test('fetchData should return correct data', () => {
const mockData = { foo: 'bar' };
fetchMock.mockResponse(JSON.stringify(mockData));
return fetchData().then(data => {
expect(data).toEqual(mockData);
});
});在这个示例中，我们使用 fetchMock.mockResponse() 模拟了一个返回结果为 { foo: 'bar' } 的 API 请求。然后，我们调用 fetchData() 函数来获取数据，并使用 expect() 断言函数来判断返回的数据是否正确。
模拟 API 请求的不同情况
除了模拟正常的 API 请求，我们还需要模拟一些异常情况，例如请求失败、请求超时等。下面是一些常见的模拟情况：
请求失败
fetchMock.mockReject(new Error('Request failed'));
return fetchData().catch(error => {
expect(error.message).toBe('Request failed');
});请求超时
-- -------------------- ---- -------
------------------------- -- -
------ --- --------------- -- -
------------- -- -
--------- ----- ---------------- ---- ----- -- ---
-- ------
---
---
------ --------------------- -- -
---------------------- ---- ----- ---
---在这个示例中，我们使用 fetchMock.mockResponse() 模拟了一个请求需要 5 秒钟才能返回的情况。我们使用 setTimeout() 来延迟返回结果，然后使用 Promise 对象来封装返回结果。
结论
在本文中，我们介绍了如何在 Jest 测试框架中使用 Jest Fetch Mock 插件来模拟 API 请求。我们可以使用 fetchMock.mockResponse() 来模拟正常的请求返回结果，也可以模拟一些异常情况。这样，我们就可以更方便地进行 API 请求的单元测试了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6764fdab76af2b9a20e6c638