React 是现在最流行的前端框架之一，它通过组件化和声明式编程使得构建交互性的 UI 变得简单和高效。然而，React 组件通常会依赖于异步请求来获取数据并更新 UI，这对于测试带来了一些挑战。
本文将为您介绍如何使用 Enzyme 和 Jest 来测试 React 组件的异步请求。我们将从异步请求的工作原理开始讲起，然后深入介绍如何编写有效的测试用例。最后，还会提供一些附加的学习资源和示例代码供您参考。
处理异步请求
在 React 中，组件通常会发起异步请求来获取数据并更新 UI。这些异步请求可以使用许多不同的方式来实现，例如通过 fetch、axios 或其他库来访问 REST API。不管使用什么方式，我们都需要确保我们的组件可以正确地处理异步请求。
通常，我们会使用 Promise 或 async/await 来处理异步请求。这些方法可以让我们在请求完成后执行后续的操作。例如，以下代码演示了使用 fetch 发起异步请求并在获得结果后更新组件状态：
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ----- ---- --
-
------------------- -
------------------
-------------- -- ----------------
---------- -- --------------- ---- ----
-
-------- -
----- - ---- - - -----------
------ -
-----
--------------
----- -- --------------
------
--
-
-编写测试用例
现在我们已经了解了如何处理异步请求，让我们来看看如何编写有效的测试用例。我们将使用 Jest 和 Enzyme 来编写测试用例。
我们的目标是编写测试，以确保组件在异步请求成功后可以正确更新状态并显示数据。以下是一个基于 Jest 和 Enzyme 的测试用例示例：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ---- ---- ------ --- -------- ---- ------ -- -
----- ------- - ----------------- ----- ------ ---
------------ - ------------------------------- -- ---------
----- ------- - -------------------- ----
---------------------------------------------------
--------------- -- -
-----------------
-------------------------------------------------
-------
---
---
---在这个测试用例中，我们首先模拟了一个成功的异步请求，并将其注入到 window.fetch 函数中。然后，我们使用 Enzyme 的 shallow 函数来创建组件的浅渲染副本。由于在 MyComponent 中，组件的数据加载是在 componentDidMount 生命周期钩子中完成的，所以在初始化测试用例的wrapper之后，我们还检查了 <h1> 元素的文本内容是否为 “Data:”。
接下来，我们需要等待异步请求完成。由于在社区中有很多方法可以等待异步请求完成，例如使用 setTimeout 或直接在 then 回调中添加期望语句。我们这里使用了 done 回调函数，以便让测试知道何时完成。
在成功获得数据后，我们更新了 wrapper 实例，以便可以获得新的组件渲染结果。最后，我们检查是否正确更新了数据的 UI。
结论
在本文中，我们介绍了如何使用 Enzyme 和 Jest 来测试 React 组件的异步请求。我们还提供了关于异步请求的一些基本知识，并演示了如何在测试中等待异步请求的返回。通过深入了解这些内容，你将能够有效地测试你的 React 组件并提高你的代码质量。
学习资源和示例代码
如果您对使用 Enzyme 和 Jest 测试 React 组件的异步请求感兴趣，以下是一些学习资源和示例代码供您参考:
- React 官方文档 提供了有关在 React 组件中测试异步请求的文档。
- Jest 官方文档 提供了有关在 Jest 中测试异步代码的如何工作的文档。
- Enzyme 官方文档 提供了有关在 Enzyme 中测试异步代码的文档。
- React Testing Library 是另一种测试 React 组件的方式，它可以帮助您更好的编写行为描述型测试用例。
示例代码：（注意，这个缺少 MyComponent 组件， 但是这个并不影响理解）
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ---- ---- ------ --- -------- ---- ------ -- -
----- ------- - ----------------- ----- ------ ---
------------ - ------------------------------- -- ---------
----- ------- - -------------------- ----
---------------------------------------------------
--------------- -- -
-----------------
-------------------------------------------------
-------
---
---
---来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fcba4644713626017237bb