React 是一种非常流行的前端开发框架，同时也是单页面应用程序的首选技术。随着 React 应用程序变得越来越复杂，测试变得越来越必要。在本篇文章中，我们将介绍 Enzyme，一个流行的 React 组件测试库，并演示它如何帮助我们测试 React 组件的 UI。
什么是 Enzyme
Enzyme 是由 Airbnb 开发的 React 组件测试工具库，用于在开发过程中测试 React 组件的行为和输出。它提供了一组强大的 API，可以轻松地模拟 React 组件，将它们挂载到虚拟 DOM 中，并与它们进行交互。
Enzyme 具有许多强大的特性，例如组件渲染测试、生命周期测试、事件处理程序测试等。它还可以方便地与 Jest、Mocha、Chai 等测试库集成。
安装 Enzyme
首先，我们需要安装 Enzyme 包。可以通过 npm 安装 Enzyme：
--- ------- ---------- ------
接下来，我们还需要安装 enzyme-adapter-react-16 适配器，因为最新版的 Enzyme 不再默认支持 React 16 或更高版本。这个适配器是为 React 16+ 版本开发的，因此我们需要安装它：
--- ------- ---------- -----------------------
然后在项目的测试文件中导入 Enzyme 和适配器：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
Enzyme API
在使用 Enzyme 测试 React 组件时，有三个最常用的函数：shallow、mount 和 render。这些函数与我们使用 mount、render 和 shallow-restrictions 的方式有点类似。以下是它们的简要说明：
**shallow( )**：只渲染当前组件，不渲染其子组件。如果子组件是通过函数传递的方式渲染的，那么它们只会被渲染成一个浅层次的模拟版本，这就使得测试运行更快并且测试代码更简单。
**mount( )**：渲染当前组件和所有子组件。这个函数主要用于对组件进行完全渲染，然后对生命周期以及嵌套子组件进行完整的测试和检查。
**render( )**：渲染当前组件和所有子组件到静态 HTML。这个函数主要用于将组件渲染到字符串中，然后在进行比较和断言时使用。
此外，Enzyme 还提供了许多用于测试组件 UI 的函数和方法，例如：
**find( )**：查找包含指定属性、类名或标记名的元素。
**simulate( )**：模拟组件上的事件，并检查事件处理程序是否按预期触发了。
**props( )**：返回组件的属性对象以便检查。
**state( )**：返回组件的状态以便检查。
使用 Enzyme 测试一个 React 组件
接下来，我们将演示如何使用 Enzyme 编写一个简单的测试用例，以检查组件是否显示了预期的内容。我们将使用 Jest 作为我们的测试库，但使用 Mocha、Chai 或其他测试库和断言也是可行的。
步骤 1：创建 React 组件
首先，我们需要创建一个简单的 React 组件。以下是一个包含一个 heading 和一些文本的组件：
------ ----- ---- --------
----- ------- - -- -- -
-----
---------- ------- --- --- -----------
-----------
-----------
----------
------
--
------ ------- --------步骤 2：编写测试用例
现在，我们可以编写测试用例来测试 Welcome 组件是否正常工作。以下是一个基本的测试案例，它使用 Enzyme 和 Jest。这个测试案例在逐行注释中有详细的解释：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------ -- -- ------- --
----------------- ----------- -- -- -
---------- ------ - ------- --- - ---- -- ------- -- -- -
----- ------- - ---------------- ---- -- -- ------- --- ------- ------- --- -
-- -- ---- ------ ------- --------------
---------------------------------------------- ------- --- --- ---------
-- -- ---- ---------------------------
-------------------------------------------------------
-- -- ---- -------- ------ --------------
----------------------------------------------------
-- -- ---- -------- ------ --------------
----------------------------------------------------
-- -- ---- -------- ----- --------------
---------------------------------------------------
---
---这个测试案例使用 shallow 函数将 Welcome 组件挂载到虚拟 DOM 中。测试用例接着使用 find 函数查找包含标题和用户列表的元素，以便检查它们的文本和子元素数量是否正确。
结论
Enzyme 是一个功能强大的测试库，它可以帮助我们轻松测试 React 组件的 UI。在本文中，我们了解了 Enzyme 的基础知识，并通过一个简单的示例说明了如何使用它测试 React 组件。通过这篇文章，我们希望读者们学会如何更好地使用 Enzyme 和其他相关工具来测试自己的 React 组件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67122dbcad1e889fe2032992