React作为一种流行的JavaScript库，凭借其高效、灵活和可重用的特性成为了Web应用程序开发中不可或缺的一部分。而React组件是React中最重要和最基础的概念。在React中，组件分为函数组件和类组件，用于将应用程序拆分为独立的、可重用的部件。
在编写React组件时，我们不可避免地需要对他们进行测试。而Enzyme是一个流行的React测试库，它提供了大量的API用于测试React组件。本文将介绍如何使用Enzyme测试React组件中条件渲染和列表渲染。
Enzyme简介
Enzyme是由Airbnb开源的，React组件测试工具库。它提供了shallow、mount和render等API，使得测试变得简单易用。shallow方法能够模拟渲染组件并返回其输出结果，且不进行子组件的完全渲染，而mount方法则可以模拟完整渲染，包括其子组件。render方法则返回静态HTML，并允许您在渲染之前和之后断言。
我们可以通过在React项目中引入Enzyme库，并做出必要的配置，就可以通过它来进行React组件测试。
条件渲染
条件渲染是Web应用程序开发中常见且重要的任务之一。在React中，条件渲染非常直观，可以根据状态或属性的值来确定组件是否应该渲染。下面是一个示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ---- ------- --------- -
------------------ -
-------------
---------- - -
--------- -----
--
-
----- - -- -- -
--------------- --------- ---- ---
-
-------- -
----- - -------- - - -----------
------ -
-----
--------- - -
--
--------------
------- ---------------------------------
---
- - -
--
-------------
------- --------------------------------
---
--
------
-
-
-在上面的示例代码中，我们定义了一个User组件。它包含一个状态变量loggedIn，用于记录用户是否已登录，以及一个login方法处理登录信息。组件通过检查loggedIn状态变量来确定应该呈现哪个条件渲染内容。
我们可以使用Enzyme的shallow方法来模拟渲染组件并返回输出结果，然后断言它是否正确。以下是测试该组件条件渲染的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---- ---- ---------
------------------ -- -- -
--------------------- -- -- -
----- ------- - ------------- ----
------------------------------------------------------------------
---
--------------------- -- -- -
----- ------- - ------------- ----
------------------ --------- ---- ---
-------------------------------------------------------------------
---
---在测试中，我们首先使用shallow方法模拟渲染组件并创建一个包含未登录状态的wrapper对象。然后，我们使用containsMatchingElement方法检查组件是否包含“请登录！”这条消息。接下来，我们使用setState方法将loggedIn状态变量设置为true，再次使用containsMatchingElement方法检查组件是否包含欢迎消息。
列表渲染
列表渲染是Web应用程序开发中另一个常见且重要的任务。在React中，可以通过map()方法将数组映射到React元素数组，并将其呈现为列表。以下是一个示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ---- ------- --------- -
------------------ -
-------------
---------- - -
------ ------ ----- ----- -----
--
-
-------- -
----- - ----- - - -----------
------ -
-----
--------------
----
------------------ ------ -- -
--- ------------------------
---
-----
------
--
-
-
------ ------- -----在上面的示例代码中，我们定义了一个List组件。它包含一个状态变量items，其中包含水果列表。组件通过使用map方法，将所有的水果列表项映射到li元素的数组中，呈现为一个有序列表。
我们可以使用Enzyme的shallow方法来模拟渲染组件，并断言其是否正确。以下是测试该组件列表渲染的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---- ---- ---------
------------------ -- -- -
----------------- -- -- -
----- ------- - ------------- ----
------------------------------------------
---
------------------ -- -- -
----- ------- - ------------- ----
---------------------------------------------------
---
---在测试中，我们使用shallow方法模拟渲染组件并创建一个包含四个列表项的wrapper对象。然后我们使用find方法查找包含li元素的盒子，用length方法检查是否有四个元素。接下来，我们使用at方法和text方法来断言第一个列表项中的文本是否为“苹果”。
结论
本文介绍了Enzyme测试React组件中条件渲染和列表渲染的写法，并提供了相关示例代码。Enzyme提供了极好的API，使得测试React组件变得简单易用。希望本文内容对读者对于React组件测试和使用Enzyme测试工具库有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671da9699babaf620fb777a7