如何在 Jest 中测试 HTTP 请求
在前端开发中，我们经常需要测试 HTTP 请求。Jest 是一个流行的 JavaScript 测试框架，用 Jest 来测试 HTTP 请求非常方便。
本文将详细介绍如何在 Jest 中测试 HTTP 请求并提供示例代码。我们假设您已经熟悉 Jest 和基于 Promise 的 HTTP 客户端（例如 axios）。
安装依赖
首先，我们需要安装一些必要的依赖项。假设我们使用的是 axios，您可以使用 npm 命令安装：
npm install axios jest-mock-axios --save-dev
jest-mock-axios 是一个 Jest 插件，它将让我们模拟 axios 请求并且在测试中使用。
创建测试用例
接下来，让我们来创建测试用例。
在 Jest 中，测试用例文件应该以 .test.js 结尾或者在测试用例所在的目录下创建一个 tests 子目录，然后在该子目录中创建测试用例文件。
我们来创建一个 test.js 文件并写一些测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ---------------------
------ - --------- - ---- --------------
--------------------- -- -- -
----- ---- - --- -------------------
------------ -- -
-------------
---
---------- ------ ---- ---- -------- ----- -- -- -
----- ---- - - ------- --------- --
---------------------------------- ------
----- ------ - ----- ------------
-----------------------------
---
---------- ----- -- ----- ---- -- ----- -------- ----- -- -- -
---------------------------------- --------- ------ --------
----- --------------------------------------
---
---上述示例演示了如何测试 fetchData 函数，它会发起一个 GET 请求，并返回数据或抛出异常。我们使用了 axios-mock-adapter 来模拟 axios 的请求。
在测试用例之前，我们还需要 mock axios。我们可以使用 Jest 的模拟功能进行模拟：
jest.mock('axios');此时，可以使用 axios.create() 创建一个 mock 对象：
const mockedAxios = axios.create();
接下来，我们就可以在测试用例中使用 mockedAxios 了。
测试 HTTP GET 请求
假设我们要测试的是一个 HTTP GET 请求，我们可以使用 mockedAxios.get() 方法进行测试。
import axios from 'axios';
export async function fetchData() {
const response = await axios.get('/api/data');
return response.data;
}上述代码中，我们使用了 axios 的 get() 方法，这将发起一个 GET 请求并返回结果。注意，fetchData() 函数返回的是我们所关心的数据而不是整个响应对象。
我们在测试用例中使用 mockedAxios.get() 来模拟这个请求：
// 设置请求结果，当请求 '/api/data' 时返回 { result: 'success' }
mockedAxios.get.mockResolvedValue({ data: { result: 'success' } });
// 调用 fetchData 函数
const result = await fetchData();
// 断言结果是否符合预期
expect(result).toEqual({ result: 'success' });测试 HTTP POST 请求
如果您要测试 HTTP POST 请求，该怎么办？我们可以使用 mockedAxios.post() 方法进行测试。
import axios from 'axios';
export async function postData(data) {
const response = await axios.post('/api/data', data);
return response.data;
}postData() 函数发起了一个 POST 请求，需要传递数据作为参数。我们在测试用例中使用 mockedAxios.post() 来模拟这个请求：
-- -------------------- ---- ------- ----- ---- - - ----- ----- ---- -- -- ---------- ----------- --- - -------- ---- - ------------------------------------ ----- - -------- ---- - --- -- -- -------- ----------- ----- ------ - ----- --------------- -- ---------- ------------------------ -------- ---- ---
总结
在 Jest 中测试 HTTP 请求非常简单，但是您需要掌握一些技巧以使测试更加高效和有效。在本文中，我们介绍了如何使用 Jest 和 axios-mock-adapter 来测试 HTTP 请求，并提供了示例代码。
如果您遇到了任何问题或有任何建议，欢迎在下面留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64741574968c7c53b0184b61