在现代的前端应用程序中，经常需要与 API 交互以获取数据。为了保证代码的可靠性和稳定性，我们需要对 HTTP 请求进行测试。
本文将介绍如何在 Jest 中测试 React 应用程序中的 HTTP 请求，并提供具有深度和学习意义的指导。
准备工作
在开始测试前，需要准备以下工作：
安装 Jest：可以使用 npm 或者 yarn 进行安装。
安装 axios：axios 是一个流行的 HTTP 请求库，我们将使用它来发送请求。
npm install axios --save-dev
- 配置 Jest：在 package.json 中添加以下内容：
{
"jest": {
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
}
}
}上面的配置是为了让 Jest 能够识别 @/ 开头的相对路径，这个路径通常指向 src 目录。
编写测试
在编写测试之前，需要先编写能够发送 HTTP 请求的函数。这里我们将使用 axios.get() 方法请求一个示例 API：
import axios from 'axios';
export const fetchData = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
return response.data;
}上面的 fetchData 函数将请求一个 JSON 信息，并返回其中的数据。
现在我们可以编写测试了。我们使用 describe 和 it 函数来编写测试代码，describe 用于描述一组测试，it 用于描述一个具体的测试用例。
在编写测试之前，需要先实现一个 mock 函数，模拟 axios.get() 方法。这里我们使用 Jest 提供的 jest.mock() 方法：
// __mocks__/axios.js
export default {
get: jest.fn(() => Promise.resolve({ data: {} })),
};上面的代码定义了一个空的 mock 对象，并 mock 了 axios.get() 方法。
现在可以编写测试了，我们将测试 fetchData 函数是否能正常发送 HTTP 请求，并返回数据：
-- -------------------- ---- -------
------ - --------- - ---- --------
------ ----- ---- --------
-------------------
--------------------- -- -- -
---------- ----- ------ ----- -- -- -
----- ---- - - ------ ----- ------ --- - --
----------------------------- ---- ---
----- ------ - ----- ------------
-----------------------------
---
---上面的测试代码首先使用 jest.mock() 方法 mock 了 axios，然后定义了一个测试用例，测试 fetchData 函数是否返回正确的数据。
我们使用 axios.get.mockResolvedValue() 方法来设置 mock 返回的数据，并使用 expect() 函数断言返回的结果是否正确。
总结
本文介绍了如何在 Jest 中测试 React 应用程序中的 HTTP 请求，包括准备工作和具体的测试代码。通过学习本文，你将了解到如何使用 Jest、axios 和 mock 函数来测试你的应用程序中的 HTTP 请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64968a3048841e98943b5b02