在 Jest 中测试 React 应用程序中的 HTTP 请求

在现代的前端应用程序中，经常需要与 API 交互以获取数据。为了保证代码的可靠性和稳定性，我们需要对 HTTP 请求进行测试。

本文将介绍如何在 Jest 中测试 React 应用程序中的 HTTP 请求，并提供具有深度和学习意义的指导。

准备工作

在开始测试前，需要准备以下工作：

1. 安装 Jest：可以使用 npm 或者 yarn 进行安装。

2. 安装 axios：axios 是一个流行的 HTTP 请求库，我们将使用它来发送请求。

npm install axios --save-dev

1. 配置 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 请求。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64968a3048841e98943b5b02