Enzyme 测试 React 组件时如何模拟异步网络请求
在前端开发中，测试是非常重要的一部分，而 Enzyme 是 React 组件测试中最常用的工具之一。随着异步网络请求的普及，我们也需要在测试中模拟这些异步请求，以确保我们的组件在异步请求时表现正常。本文将介绍如何在 Enzyme 中模拟异步网络请求，以测试 React 组件。
- 模拟异步请求的工具
在 Enzyme 中模拟异步请求，我们需要使用一个名为 sinon 的工具。Sinon 可以模拟异步请求，使我们的测试更真实。在安装 sinon 之前，我们需要先安装以下依赖：
npm install sinon --save-dev npm install axios --save-dev
- 创建一个 React 组件
首先，我们需要创建一个简单的 React 组件，以用于测试。该组件将使用 axios 库进行 ajax 请求，传递参数并返回数据。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- -------------- ------- --------- -
------------------ -
-------------
---------- - -
----- ----
--
-
------------------- -
------------------------------------------------------------------------
-------------- -- -
--------------- ----- ------------- ---
---
-
-------- -
------ -
-----
- --------------- - --------------------- - ------------ -
------
--
-
-
------ ------- ---------------在此代码中，我们定义了一个名为 AsyncComponent 的 React 组件，它包含了一个异步请求方法 componentDidMount()。当组件加载时，它将使用 axios 库发送一个 ajax 请求，并更新组件的状态。
- 编写测试
现在，我们将编写测试以确保组件正常工作。我们需要测试组件是否正确加载，并通过模拟异步请求响应，检查组件是否展示出正确的数据。接下来，我们将编写一个测试套件来完成这个任务。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----- ---- --------
------ ----- ---- --------
------ -------------- ---- -------------------
-------------------------- -- -- -
--- --------
------------- -- -
------- - ----------------------- ------ ----
---
------------ -- -
----------------
---
---------- ------ ------- -- --- ----------- -- -- -
------------------------------------------
---
---------- ------ ---- ----- ------- ------ -- -- -
----- -------- - - ----- - ------ --- ------ - --
----- --------- - ----------------- --------------------------
------ ---------------------------------------------- -- -
-----------------
------------------------------- --------
--------------------
---
---
---在上面的代码中，我们首先使用 shallow() 函数来创建了一个浅渲染的组件实例。接下来，我们定义了 beforeEach 和 afterEach 函数，它们将在每个单元测试之前和之后运行。在 beforeEach 函数中，我们创建了一个浅渲染实例，并将其保存在变量 wrapper 中。
在第一个测试中，我们测试了组件是否正确加载，即组件是否在加载时显示 “loading…”。
接下来，在第二个测试中，我们模拟了 axios 库的异步响应，并将其注入到组件中。我们通过使用 sinon.stub() 来仿真组件发送的 ajax 请求，并使用 Resolves 属性来设置响应，以检索组件的数据。此外，我们还将用 restore() 函数在测试完成后恢复 axios 库的原始状态。这个测试用例通过模拟组件的异步请求， 测试了组件获取到数据之后的行为。
- 结论
在这篇文章中，我们探讨了在 Enzyme 中测试 React 组件时如何模拟异步请求。通过使用 Sinon 工具模拟异步请求，我们可以确保我们的组件在加载异步数据时表现正常。我们编写的测试用例可以帮助我们测试组件的异步性能，并确保每个参数输入产生正确的输出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719fc399babaf620fa015a9