在前端开发中，异步数据请求是一个常见的操作。而在使用 React 框架时，我们会用到 Enzyme 这个工具来做组件测试。然而，如何针对异步数据请求进行 Enzyme 测试呢？本文将会详细讲解这个问题。
Enzyme 简介
先来简单介绍一下 Enzyme。Enzyme 是 Airbnb 开源的一个 JavaScript 测试工具库，用来测试 React 组件。Enzyme 提供了三种不同类型的渲染方式：
- 静态：将 React 组件渲染成静态 HTML，并分析组件的输出。
- 浅渲染：只渲染目标组件并对其进行 DOM 操作。
- 完整渲染：将 React 组件完整渲染，并可测试其交互性质。
这里的多数测试都是针对 React 组件进行测试的，由于本文重点在于异步数据请求如何进行 Enzyme 测试，这里只讲解完整渲染方式。
异步数据请求测试
在 React 组件中，我们可以发起异步数据请求。比如，使用 fetch 获取数据。
-- -------------------- ---- -------
----- ---- ------- --------------- -
------------------ -
-------------
---------- - - ----- ---- --
-
------------------- -
---------------------------------------------
-------------- -- ----------------
---------- -- --------------- ---- ----
-
-------- -
----- - ---- - - -----------
------ -
-----
----- - -
-----------------------
- - -
---------------------
--
------
--
-
-这个组件会在所挂载到的 DOM 上加载一个 GitHub 用户的信息。在组件挂载到 DOM 上后，组件会向 https://api.github.com/users/octocat 发起异步请求，并将结果设置为状态。状态更新后，组件重新渲染以展示用户的信息。
如果要测试这个组件，我们需要确保异步请求的结果已经得到了处理。这会有以下两个问题需要解决：
- 我们如何模拟异步数据请求？
- 我们如何确保渲染结果是异步请求返回的结果？
模拟异步数据请求
在测试中，我们需要模拟异步数据请求并返回数据。这可以用 Enzyme 模拟产生的渲染出来的 DOM 对象的方法来完成。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ---- ---- ---------
--------------- ---- -- -- -
---------- ------ --- ---- ----- --- ------- ---- -- -
----- -------- - - ------ --------- --
------------------ ------------------------------ --
-----------------
----- -- -- --------------------------
--
--
----- ------- - ----------- ----
------------- -- -
-----------------
-------------------------
--------------------------------------------------------
-------
---
---
---在测试中，我们模拟了一个包含 login 属性的 JSON 对象，并使用了 jest.spyOn 和 mockImplementation 方法来替换掉全局中的 fetch 方法。这样我们就能够在测试中获取到 fetch 常量，并返回一个包含需要的 JSON 对象的 Promise。测试中使用了 update 方法更新了包装器，以使组件的状态和视图同步。
确保异步请求渲染完成
我们需要在异步请求完成之后，再确保渲染出来的结果包含异步请求的结果。为此，我们需要等待异步请求完成后再使用断言来检查结果。
-- -------------------- ---- -------
---------- ------ --- ---- ----- --- ------- ---- -- -
----- -------- - - ------ --------- --
------------------ ------------------------------ --
-----------------
----- -- -- --------------------------
--
--
----- ------- - ----------- ----
------------- -- -
-----------------
-------------------------
--------------------------------------------------------
-------
---
---在测试中，it 函数收到两个参数。第一个是测试名称，第二个是直接运行测试。测试中使用了延迟函数，让 setTimeout 在方法返回结果前先等待一段时间。然后我们使用 done() 方法作为异步测试完成的标志。
延迟函数和 done 方法相互协作来确保异步请求完成后再进行下一步操作。setInterval 的返回值将被传递给 update 方法，以保持组件状态和视图同步。然后通过 expect 断言方法来验证组件已经成功渲染，而且渲染出来的结果包含了异步数据请求的结果。
总结
本文覆盖了如何对 React 组件进行 Enzyme 测试。特别针对了异步数据请求，提供了详细的步骤和示例代码。希望这篇文章能够帮助你更好地理解如何使用 Enzyme 进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64faa9a7f6b2d6eab31854eb