React是一个流行的JavaScript库，用于构建用户界面和单页应用程序。Enzyme是一个React测试工具，可以轻松测试React应用程序的组件和行为。本文将详细介绍如何使用Enzyme测试React应用程序中发出的API调用，并提供示例代码。
什么是API？
API是应用程序编程接口，是两个软件应用程序之间的接口。API定义了两个软件应用程序之间的通信方法，当一个应用程序需要与另一个应用程序通信时，它可以使用API向另一个应用程序发出请求，然后接收来自另一个应用程序的响应。
在React应用程序中，当您需要从另一个应用程序获取数据时，您需要使用API调用。React可以使用Axios、Fetch等库从服务器获取数据，并将数据渲染到应用程序中。
为什么要测试API？
在构建React应用程序时，一个常见的需求是从API中获取数据。测试React组件和交互是常规做法，但是如何确保API调用是否成功，是否有超时等应该也考虑到。这时候我们可以使用Enzyme测试工具，它可以模拟API调用并检查API是否返回正确的结果。
测试API调用可以确保React应用程序与API交互的正确性，并确保无论从哪个设备或平台访问应用程序，它的行为都是一致的。
测试API步骤
下面是使用Enzyme测试API调用的步骤：
- 模拟API调用
- 确认API是否成功
- 检查API返回结果
让我们继续讲解每个步骤。
步骤1： 模拟API调用
这个步骤包含第一部分的测试(setup)和第二部分的测试(Run)。我们将首先设置我们的测试环境，然后运行测试并进行API调用。
我们可以使用一个React测试工具库，如jest或mocha / chai作为测试驱动程序运行工具。下面是 Jest 示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----- ---- --------
------ ----------- ---- ---------------------
------ ----- ---- ----------
--------------- --------- ------- -- -- -
--- -----
----- ---------- - ------------ ----
------------ -- -
---- - --- -------------------
------------------------------- -
------ -- ----- ----- -- - ----- ------- ---
---
---
----------- -- -
---------------
---
----------- ----- --- -------- ------ ----- -- -- -
----- ------------------------------------------
-------------------------------------------------------
---
---这里我们定义了一个名为Users的组件，并使用Mount将其包装。在他之前和之后我们会分别创建和关闭axios的mock调用。我们接着在我们的it块中定义了一个有两个元素li的组件对象，并断言它们的长度是2。
步骤2：确认API是否成功
确认API是否成功，我们需要查看API响应的HTTP状态码，通常是200或成功返回的其他代码。我们使用axios-mock-adapter库模拟这个调用，从而可以让我们检查回复，并返回合适的状态码。
下面是一个展示如何确认API是否成功的测试例子：
-- -------------------- ---- -------
------------- ------ -- -- -
------------- -- -
---- - --- -------------------
---
------------ -- -
---------------
---
---------- ------ - --- ------ -- ---------- ---- -- ------ ----- -- -- -
----------------------------------------- - ----- - ----- ----- ---- - ---
----- -------- - ----- ------------------------------
-------------------------------------
---
---在这个示例中，我们创建了一个名为users的API路由，然后使用mock.onGet模拟了这个路由。然后我们发出一个请求，这时API将返回一个HTTP状态码200，它常常是指成功地发出了请求并收到了预期的响应。
步骤3：检查API返回结果
在API响应成功时，我们需要检查它是否返回了我们预期的数据。在这个步骤中，我们需要检查正确的数据是否到达了我们的组件，并且是否以正确的方式显示或渲染到界面上。
下面是一个检查API返回结果是否正确的测试例子：
-- -------------------- ---- -------
------------- ------ -- -- -
------------- -- -
---- - --- -------------------
---
------------ -- -
---------------
---
---------- --- ---- --- -- --------- --------- -- -------- ----- -- -- -
----------------------------------------- - ----- ----- ---- ---
----- --------- - ------------ ----
----- -----------------------------------------
------------------------------------------------------------ ------
---
---在这个示例中，我们创建了一个名为User的组件，并使用Mount将其包装。然后我们发送一个请求，这时候API将返回一个名为“John Doe”的用户。我们接着使用find方法来寻找名为“text-display”的组件，并使用text方法来检查结果是否为“John Doe”。
总结
在您的React应用程序中，API调用非常重要，因为它们由于与外部世界的通信而提供给您的应用程序数据。测试API调用确保应用程序可以正确地处理从外部应用程序中获取的数据。Enzyme工具可以让您轻松地测试您的React应用程序的API调用，并使用步骤1-3来测试API。这样，您就可以确定您的应用程序可以正确地从API调用中获取数据，并将其正确地渲染到UI中，使您的应用程序更加健壮和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ad134948841e9894939998