在现代 Web 开发中，前端与后端交互变得越来越频繁。为了保证前端代码的质量和稳定性，我们需要使用测试来验证我们的代码是否达到预期的效果。
在 React 组件开发中，通常会使用异步请求来获取数据，因此测试异步请求的能力也变得越来越重要。本文将介绍如何使用 Jest 来测试 React 组件中的异步请求。
安装和配置 Jest
首先，我们需要安装 Jest。可以使用以下命令进行安装：
npm install --save-dev jest
安装完成后，我们需要在项目中创建一个 Jest 的配置文件 jest.config.js。在配置文件中，我们可以指定 Jest 要测试的文件或文件夹：
module.exports = {
testMatch: ["<rootDir>/src/**/*.test.js"],
};这里我们让 Jest 只测试以 .test.js 结尾的文件，且这些文件位于 src 文件夹下或其子文件夹下。
编写测试用例
接下来，让我们来编写一个测试用例。假设我们有一个组件 CommentList，它通过异步请求获取评论列表并渲染。我们需要测试该组件是否正确地获取了评论列表并将其渲染。
首先，我们需要使用 Enzyme 来创建一个 CommentList 实例：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- --- ------- ------ -- -- -
----- ------- - -------------------- ----
-------------------------------------------------
---
---然后，我们可以使用 Jest 的 Mock 功能来模拟异步请求，并使其返回一个假数据。假设我们使用了axios来进行异步请求，我们可以像下面这样编写 Mock：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
-------------------
----------------------- -- -- -
----------- --- ------- ------ ----- -- -- -
-----------------------------
----- -- --- -- -------- -------- -- -- - --- -- -------- -------- -- ---
---
----- ------- - -------------------- ----
----- ---------------------------------------
-------------------------------------------
- --- -- -------- -------- -- --
- --- -- -------- -------- -- --
---
---
---这里我们使用 mockResolvedValue 方法来模拟异步请求的返回值。我们还需要使用 await 关键字来等待异步请求完成，然后再进行断言。
在上面的测试用例中，我们可以通过 wrapper.state 来获取组件的状态，然后对其进行断言。
总结
在使用 Jest 测试 React 组件中的异步请求时，我们需要使用 Mock 来模拟异步请求的返回值，并使用 Enzyme 来创建组件实例。通过测试用例，我们可以保证组件能够正确地获取数据并渲染。这样一来，我们就能够更加自信地开发前端代码了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a1ff27add4f0e0ffa129d8