在编写 React 组件时，我们经常会涉及到异步请求，比如获取远程 API 返回的数据并渲染到页面上。这时候如何进行测试呢？Enzyme 是 React 组件测工具库中的佼佼者，本文将介绍如何使用 Enzyme 测试 React 组件中的异步请求。
安装 Enzyme
如果你还没有安装 Enzyme，请通过 npm 进行安装：
--- ------- ---------- ------ ----------------------- -------------------
Enzyme 需要一个适配器来连接 React，这里选用的是适配 React 16 的 enzyme-adapter-react-16。
测试异步请求的组件
假设我们有一个组件 UserList，它需要从远程 API 获取用户列表，并且渲染到页面中。为了模拟异步请求，这里使用了 setTimeout 来模拟异步行为。
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- -------- ------- --------- -
----- - -
------ --
--
------------------- -
------------------------------------- -- -
------------- -- -
--------------- ------ ------------- ---
-- ------
---
-
-------- -
----- - ----- - - -----------
------ -
-----
-------- ---------
----
--------------- -- -
--- ------------------------------
---
-----
------
--
-
-
------ ------- ---------测试异步请求
现在我们来编写一个测试用例，测试 UserList 组件在异步请求完成后是否正确渲染了用户列表。
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----- ---- --------
------ ----------- ---- ---------------------
------ -------- ---- -------------
----- ---- - --- -------------------
----- -------- - -- --- -- ----- ------- -- - --- -- ----- ----- ---
------------------ ----------- -- -- -
------------ -- -
----------------------------------- ----------
---
----------- -- -
---------------
---
----------- ---- ------ ---- -- -
----- ------- - --------------- ----
------------- -- -
-----------------
------------------------------------------
----------------------------------------
-------
-- ------
---
---在这个测试用例中，我们通过 axios-mock-adapter 模拟了一个从 /api/users 获取用户列表的 API，然后用 Enzyme 的 mount 函数来将 UserList 组件渲染到 DOM 中，最后在异步请求完成后通过断言来验证渲染的结果。
需要注意的是，由于异步请求的延迟，我们需要将断言放到一个回调函数中，并且在断言完成后调用 done 函数表示测试结束。
结论
本文介绍了如何使用 Enzyme 测试 React 组件中的异步请求，通过模拟 API 请求并在测试中进行断言来验证组件的行为。Enzyme 提供了丰富的 API 来方便我们进行组件测试，是 React 组件测试必不可少的工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f4687bf40ec5a964ecf542