React 是一款流行的前端框架，但是当应用越来越大、越来越复杂时，测试成为一个巨大的挑战。为了简化 React 应用的测试，社区中出现了许多测试库。其中，Enzyme 是一个非常流行的测试库之一。在最近的 Enzyme 3.1 版本中，一些新的功能带来了更简单和更灵活的 React 应用测试。
Enzyme 简介
Enzyme 是 React 应用的 JavaScript 测试工具，由 Airbnb 开源。它提供了一组实用的工具，用于轻松编写和运行测试，并使测试更加直观和人性化。Enzyme 可与 Jest、Mocha、Chai 等常见测试运行器配合使用。
Enzyme 具有以下主要特点：
声明式测试 API：Enzyme 提供了一组基于 JSX 的 API，可以用类似 jQuery 的方式选择、操作和查询组件树的各个部分。
丰富的渲染方式：Enzyme 具有多种渲染组件的方法，包括完全渲染、静态渲染和 Shallow 渲染。这使得我们可以根据需要选择最适合的渲染方法，并根据需要模拟各种场景。
强大的断言支持：Enzyme 与其他测试库良好地集成，包括 Jest、Mocha、Chai 等。它提供了强大的包装和断言函数，使我们更容易和更可靠地编写测试。
Enzyme 3.1 的新功能
在 Enzyme 3.1 中，添加了一些重要的新功能，包括：
支持 React 16：由于 React 16 对渲染流程进行了重大更改，Enzyme 3.1 版本进行了适应，支持 React 16。
支持 React Context：React Context 是 React 16 中的一个新特性，可以通过跨级传递数据来避免使用 props 在组件之间传递数据。Enzyme 3.1 版本能够支持 React Context，并提供了相应的测试 API。
支持异步代码测试：由于 React 应用中经常存在异步代码、API 调用和回调等场景，因此 Enzyme 3.1 版本支持了异步代码的测试。它提供了一组实用的 API，有助于检测异步事件完成并确定是否成功完成。
让我们来看看如何通过 Enzyme 进行测试。
包含示例代码的测试教程
为了演示 Enzyme 3.1 中新的功能，我们将编写一个简单的应用程序。这个应用程序包括一个顶级组件和一个嵌套组件。顶级组件通过 API 调用从服务器上获得一些数据，并将其送到嵌套组件中进行展示。我们将编写测试来检查组件是否正确渲染并显示了正确的数据。
我们假设我们已经将 React 和 Enzyme 安装为 Node 模块，并已经创建一个名为 "NestedList" 的 React 组件。该组件的实现如下所示。
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - -- ----- -- -- -----------------
----- ---------- ------- --------------- -
------------------ -
-------------
---------- - - ----- -- --
-
----- ------------------- -
----- -------- - ----- ----------------------------------
----- ---- - ----- ----------------
--------------- ---- ---
-
-------- -
----- - ---- - - -----------
------ -
-----
------ ---------
----
----------------- ------ -- -
--------- ----------- ------------- --
---
-----
------
--
-
-
------ ------- -----------在此基础上，我们将编写一些测试。首先，我们需要安装一些其他的依赖项：Jest 和 Enzyme 3.1，以及 Enzyme 的适配器（adapter）。
npm install --save-dev jest enzyme enzyme-adapter-react-16
我们在根目录下创建一个名为 "test" 的新目录，并在其中创建一个名为 "NestedList.test.js" 的文件。然后，我们将编写一组测试。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---------- ---- ----------------
---------------------- -- -- -
---------- ------- ---- ----- --- ------ ----- -- -- -
----------------------------------------------- -------- -----------
----- ------- - ------------------- ----
--------------------------------------------- -------
-------------------------------------------
----- ---------------------------------------
-------------------------------------------
---------------------------------------------------------
---------------------------------------------------------
---------------------------------------------------------
---
---以上测试是一个简单的 Shallow 渲染测试，用于确保组件采用指定的渲染代码呈现正确内容。由于我们使用了 Shallow 渲染，因此我们检查的是组件的直接子元素。我们首先断言了 h1 元素是否存在并且其文本内容是否为 "My List"。然后，我们检查了列表元素的数量，发现默认情况下为零，因为我们尚未对 API 进行调用。在我们调用组件的 componentDidMount 方法后，我们检查了列表元素的数量，并确信列表中包含了正确的数据项。
结论
Enzyme 3.1 为 React 应用测试提供了更多的灵活性和简化测试的工具。新功能包括对 React 16 和 React Context 的支持，以及对异步代码测试的支持。通过使用 Enzyme 编写测试，我们可以更可靠地检测 React 应用程序中的错误，并确保应用程序按预期运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e87f8e30a6581ceb4992d