在现代前端开发中，测试是不可或缺的一部分。随着 React 应用的不断增长，测试 React 组件也变得越来越重要。Enzyme 是一个 React 测试工具，它可以极大地简化 React 组件的测试，并且被广泛使用。在本文中，我们将介绍如何使用 Enzyme 来测试 React 组件。
什么是 Enzyme
Enzyme 是由 Airbnb 开源的 React 测试工具。 它提供了一种易于使用且功能强大的方式来测试 React 组件的 UI。 Enzyme 提供了一组用于选择和操作组件中的元素的 API。 它还提供了全面的浅层渲染（shallow rendering）和完全渲染（full rendering）工具。 Enzyme 的 API 设计旨在保持简洁、直观和易于扩展。
安装 Enzyme
您可以通过 NPM 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
在 Enzyme 中，适配器（adapter）是必需的，它负责将 Enzyme 与特定的 React 版本配对。在大多数情况下，您需要为您的 React 应用程序安装适用于当前 React 版本的适配器。
在本指南中，我们将使用 React 16，因此我们将安装适用于 React 16 的适配器，即 enzyme-adapter-react-16。确保在安装了适配器之后在测试代码中导入并配置适配器。
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });浅层渲染
浅层渲染是一种对 React 组件进行测试的技术，它并不涉及组件实际的 DOM 树，而是维护了一个所谓的虚拟 DOM。这使得测试速度更快，因为它避免了将组件渲染到 DOM 树中的开销。
使用 Enzyme 进行浅层渲染测试非常简单。下面是一个简单的组件，用来向用户问候：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ------- --------------- -
-------- -
----- - ---- - - -----------
------ -
-----
---------- ------------
------
--
-
-为了测试这个组件，我们可以使用 Enzyme 的浅渲染渲染器（shallow renderer）：
-- -------------------- ---- -------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ -------- ---- -------------
------------------ -------- --- --------- ---
------------------ --------- ------- -- -- -
---------- ------ --- -------- --------- ---- ---- ------ -- -- -
----- ------- - ----------------- ----------- ----
------------------------------------------------- --------
---
---首先，我们导入必要的 Enzyme 库和我们将要测试的组件 - Greeting。 在测试套件中，我们编写了一个简单的测试用例，它对组件进行了浅层渲染，并断言组件输出文本的正确性。
浅层渲染渲染器还提供了一些强大的 API，可以用于在测试中选择和操作组件的子元素。在上面的示例中，我们使用了wrapper.find('h1')来选中组件输出的 <h1> 元素。类似的，您可以使用prop()、setState()、simulate()等 API 来操作组件的 props、state 或触发事件。
完全渲染
Enzyme 还提供了完全渲染的支持，它会将组件渲染到完整的 DOM 树中，并暴露除所渲染的组件之外的所有子组件。这种方法比浅层渲染更慢，但是允许测试组件是否正确地处理各种 React 生命周期方法。
以下是一个具有内部状态的稍微复杂的 React 组件，它使用完全渲染测试：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ ------------------ --
-------------------- - --------------------------------
-------------------- - --------------------------------
-
----------------- -
---------------- ----- -- -- -- ------ ----- - - ----
-
----------------- -
---------------- ----- -- -- -- ------ ----- - - ----
-
-------- -
----- - ----- - - -----------
------ -
-----
----------------
------- ------------------------------------------
------- ------------------------------------------
------
--
-
-为了测试这个组件，我们使用 Enzyme 的 mount 渲染器：
-- -------------------- ---- -------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- ------------
------------------ -------- --- --------- ---
----------------- --------- ------- -- -- -
---------- -------- --- ----- ---- --- -- ------ -- --------- -- -- -
----- ------- - -------------- ----------------- ----
----- --------- - -----------------------------
----------------------------
------------------------------------------------
---
---------- -------- --- ----- ---- --- -- ------ -- --------- -- -- -
----- ------- - -------------- ----------------- ----
----- ----------- - -----------------------------
------------------------------
-----------------------------------------------
---
---在上面的代码中，我们依然是先导入必要的 Enzyme 库、组件和适配器，然后分别写两个用例来测试 handleIncrement() 和 handleDecrement() 函数。这两个测试用例首先使用 mount 方式渲染 Counter 组件，并通过 Wrapper 包装器来模拟事件引发状态变化。最后，使用指定条件断言测试的结果是否符合预期。
结论
Enzyme 提供了一种易于使用且功能强大的方式来测试 React 组件的 UI，这对于现代前端应用开发是至关重要的。 在本指南中，我们介绍了 Enzyme 以及使用浅层渲染和完全渲染进行测试的方式。希望这篇 Enzyme 入门指南能够帮助读者加深对测试 React 组件的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67078d4ad91dce0dc86a05e2