在使用 React 进行前端开发时，我们常常需要使用异步数据请求来获取后端数据。而在测试 React 组件时，如何模拟异步数据请求来测试组件的正确性呢？这就需要用到 Enzyme，一个用于 React 组件测试的 JavaScript 库。本文将会介绍如何使用 Enzyme 模拟异步数据请求来测试 React 组件的过程。
Enzyme 介绍
Enzyme 是一个由 Airbnb 开发的用于 React 组件测试的 JavaScript 库。它提供了一组易于使用、灵活且强大的工具，可以使得 React 组件的测试变得轻松和高效。Enzyme 支持所有的 React 版本，并提供了三种不同类型的渲染方式：shallow、mount 和 render。
- shallow：尽可能地只渲染被测试组件的浅层次子组件；
- mount：在真实的 DOM 中渲染整个组件，能够测试组件的生命周期与用户交互；
- render：使用第三方库 cheerio 在 Node 环境中生成静态 HTML，并分析生成的 HTML。由于其缺乏 DOM API,render() 无法测试组件生命周期与用户交互。
在此，我们将会使用 shallow 渲染方式来测试 React 组件。
模拟异步数据请求
由于异步数据请求需要时间来返回数据，而在测试中我们需要立即获取数据来测试组件的正确性。因此，我们需要模拟异步数据请求来使得测试能够进行。下面是一个简单的 React 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
----- -----
------ -----
--
-
------------------- -
------------------------------------ -- -
--------------- ----- ------------- ---
-------------- -- -
--------------- ------ ------------- ---
---
-
-------- -
----- - ----- ----- - - -----------
-- ------- -
------ -------------------
-
-- ------- -
------ ----------------------
-
------ -
-----
---------------------
---------------------
------
--
-
-
------ ------- ------------该组件会在 componentDidMount() 生命周期方法中发起一个 axios 异步请求，并通过 setState() 方法来更新 state 中的数据。在组件渲染时，会根据 state 中的数据来展示加载中的信息或者请求到的数据。
为了模拟异步数据请求，我们需要使用一个叫做 Jest 的 JavaScript 测试框架，同时还需要安装一个叫做 axios-mock-adapter 的库。下面是安装命令：
npm install --save-dev jest axios-mock-adapter
接着，我们需要在测试文件中编写如下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----- ---- --------
------ ----------- ---- ---------------------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ --- ------ ------ -- -
----- ---- - --- -------------------
----- ---- - - ------ -------- -------- ------- --
---------------------------------- ------
----- ------- - -------------------- ----
-----------------------------------------------
------------- -- -
-----------------
---------------------------------------------
-----------------------------------------------
-------
---
---
---在该测试中，我们首先创建了一个 MockAdapter 的实例，该实例会与 axios 实例关联。随后，我们模拟了一个对 /api/data 路径的 GET 请求，并返回了一个对象数据。在测试开始时，我们使用 shallow() 方法来渲染组件，此时组件会展示 Loading... 。但是由于异步请求需要时间，我们使用了 setTimeout() 方法来等待一段时间，然后使用 update() 方法来强制重新渲染组件。最后，我们使用 expect() 断言来测试组件是否渲染出了正确的数据，而 done() 方法则是在该测试完成时调用。
结论
通过上述代码，我们可以看到，使用 Enzyme 与 Jest 来模拟异步数据请求来测试 React 组件并不是很难。Enzyme 的灵活性让我们能够在测试中操作组件的属性与行为，如模拟异步数据请求。而 Jest 则提供了一个易于使用的测试框架来编写组件测试代码。zyme 和 Jest 的组合，使 React 组件的测试变得容易而高效。
完整代码示例，请见： https://codepen.io/pen/?template=GRmMWLz
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703f0c2d91dce0dc84d2c7a