React 是当前最流行的前端框架之一，然而，对于大型项目而言，自动化测试是保证代码质量的重要手段。Enzyme 是一个测试 React 组件的工具库，被广泛使用并且有很多优秀的特性。
本文将详细介绍 Enzyme 的使用方法，并包含示例代码，帮助大家更好地掌握 React 测试。
Enzyme 简介
Enzyme 是由 Airbnb 开源的一个基于 React 的 JavaScript 测试工具，用于测试 React 组件，能够使得 React 的测试更加高效、灵活、稳定。
Enzyme 可以让开发者在不需要渲染整个应用程序的情况下测试组件的各种状态和属性。 它提供了易于使用的 API，可以让你编写基于行为的测试（例如，当特定的方法被调用时，DOM 是否如预期般更新等）。
Enzyme 安装
你可以使用 yarn 或 npm 安装它：
---- --- ----- ------ - - --- ------- ---------- ------
还需要根据应用程序所使用的渲染器，选择安装适当的适配器。
Enzyme 支持三种 React 渲染器：ReactTestUtils、React-DOM 和 React-Native
我们需要安装一个特定的 Enzyme 适配器和测试工具：
---- --- ----- ----------------------- - - --- ------- ---------- -----------------------
接下来，我们需要在项目中手动配置 Enzyme。在项目的根文件中，例如 src/setupTests.js，添加以下内容：
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
现在你的环境已经准备好了，我们来看看 Enzyme 的使用方法。
Enzyme API
Enzyme 提供了三个典型的静态方法来渲染组件：
shallow: 可用于将我们组件的实例渲染到 DOM 中，但是只单层渲染并不渲染子组件。mount: 可以渲染完整的组件树，包括所有子组件，并实际端到端地模拟组件在 DOM 中的渲染。render: 与mount类似，但是渲染使用一个静态 HTML 渲染器而不是React自带的 DOM 渲染器。结果是一个纯对象，没有直接访问任何 DOM 状态或方法。
我们可以将要测试的 React 组件传递给 shallow、mount 或 render 函数，它将返回一个 Enzyme “wrapper” 对象，我们可以基于该包装函数进行查询。以下是一个简单的例子：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
-- ------ ------ ----- ----
------------------ -------- --- --------- ---
-------- ------------- -
------ -
-----
---------- -----------
------- -- -- ----- ------ ---------
------
--
-
-- - ----------- --- ------- ----- ------ -------
----- ------- - -------------------- ----
------------- ----------- -- -- -
-----------------------------
---Enzyme 示例
虽然 Enzyme 提供了三种不同的 API，但是我们主要关注 shallow API，因为它比较快而且十分好用。
以下是一个例子，用于测试一个包含单个按钮的组件：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------------------ -------- --- --------- ---
-------- ------------- -
------ -
------- ----------------------------------------------
--
-
-------- ----- -
----- ------- --------- - ------------------
------ -
-----
---------- -------- ------------
------- ----------------- ----------- -- -------------- - --- --
------
--
-
----- ------- - ------------ ----
------------- ------ --------- ---------- -- -- -
----------------------------------------------------------------
---
------------- ---------- ---- ------ -- --------- -- -- -
------------------------------------------------- -------- ----
---------------------------------------
------------------------------------------------- -------- ----
---在这个例子中，我们测试了 App 组件的按钮是否正确渲染并且支持点击按钮后递增计数器。为了测试这些场景，我们使用了 Enzyme API 中的 shallow、find 和 simulate 函数。
结论
Enzyme 是 React 测试中一款非常强大、易用的工具。我们通过本文来介绍 Enzyme 的使用方法并且结合实际的例子，展示了它如何帮助我们更好地测试 React 组件。希望该文对你有所帮助，并且你能更好地了解如何开发 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671f04da2e7021665efb2f8e