React 是一个流行的前端框架，但是它非常依赖于组件化，这意味着我们要使用测试来确保每个组件在应用程序运行时都能正确工作。然而，手动测试每个组件是非常耗时的，并且随着应用程序规模的扩大，测试难度会增加。这时，我们需要一种自动化测试工具来提高测试效率和覆盖率，这里介绍 Enzyme 工具库。
Enzyme 简介
Enzyme 是由 Airbnb 开源的 React 应用程序测试工具库，它提供了一组 API 来轻松测试 React 组件。Enzyme 非常灵活，可以与多种测试运行器一起使用，例如：Mocha, Jasmine, Jest 等。它可以帮助我们快速编写高质量的测试，并提高 React 应用程序的测试覆盖率。
Enzyme 提供了三种测试组件的方式：Shallow Rendering、Static Rendering 和 Full DOM Rendering。
Shallow Rendering
Shallow Rendering 只渲染当前组件，不渲染它的子组件。这种方式适合测试组件的行为并断言它的输出结果是否正确。Shallow Rendering 容易使用，速度较快，但并不能完全保证组件的完整性。
Static Rendering
Static Rendering 适合渲染组件的静态输出，并验证其输出和渲染方式是否正确。Static Rendering 能够更好地检查组件的完整性，但是它的测试速度比 Shallow Rendering 慢。
Full DOM Rendering
Full DOM Rendering 完全渲染组件及其所有子组件，并将它们插入到全局 DOM 中。这种方式非常适合测试交互行为和组件的状态。Full DOM Rendering 更接近于实际生产环境，并可以检查 DOM 事件是否正确。但就像 Static Rendering 一样， Full DOM Rendering 的测试速度相对较慢。
下面我们来看看 Enzyme 的使用示例。
Enzyme 示例
我们来看一个简单的 React 组件示例用例，组件来自 Create React App 的默认应用程序模版。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ----- -
----- ------- --------- - ------------
-------- ---------------- -
-------------- - ---
-
-------- ---------------- -
-------------- - ---
-
------ -
---- ----------------
---------- ------------
------- -------------------- -------------------------
--------
---------
------- -------------------- -------------------------
--------
---------
------
--
-
------ ------- ----我们来编写一些测试来覆盖它。
Shallow Rendering 示例
首先，我们编写测试用例使用 Shallow Rendering 来测试当前组件，并验证它的状态和输出结果是否正确。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
--- --------
------------- -- -
------- - ------------ ----
---
---------- ------ -------------- -- -- -
------------------------------------
---
---------- ------- - -- ----- -- -- -
----- -- - -------------------
-------------------------------
--------------------------------- ----
---
---------- -------- ----- ---- -------- ------ -- --------- -- -- -
----- -------------- - --------------------------
---------------------------------
----- ----- - -------------------
------------------------------------ ----
---
---------- -------- ----- ---- -------- ------ -- --------- -- -- -
----- -------------- - --------------------------
---------------------------------
----- ----- - -------------------
------------------------------------ -----
---
---我们首先引入了 React 和 shallow 方法。然后我们编写了一个测试套件用来测试我们的应用程序。在测试套件的 beforeEach 钩子中，我们使用 shallow 方法来渲染 App 组件。
我们接下来编写四个测试用例，分别测试组件是否成功渲染、组件是否包含 h1 标签、组件在点击 Increase 按钮时是否正确增加值、点击 Decrease 按钮时是否正确减少值。在每个测试用例中，我们使用 wrapper 对象来搜索相应的元素和对它们进行断言。
Static Rendering 示例
接下来，我们使用 Static Rendering 来渲染 App 组件，并测试组件的输出结果是否正确。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ --- ---- --------
------------- ----------- -- -- -
---------- ------ -------------- -- -- -
----- - --------- - - ----------- ----
----- -- - ----------------- ----
-------------------------------
---
---在这个测试用例中，我们使用了 render 方法来渲染组件，接着我们通过 getByText 方法来搜索 h1 标签，并验证它是否包含 'Count: 0' 字符串。
Full DOM Rendering 示例
最后，我们使用 Full DOM Rendering 来渲染 App 组件，并测试组件的交互行为。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- -------------------------
------ --- ---- --------
------------- ----------- -- -- -
---------- -------- --- -------- ----- ---- ------- --- --------- -- -- -
----- - --------- - - ----------- ----
----- -------------- - ----------------------
----- -------------- - ----------------------
----- -- - ----------------- ----
--------------------------------
------------------------------------ ----
--------------------------------
------------------------------------ ----
---
---在这个测试用例中，我们使用了 render 方法来渲染组件，并通过 getByText 方法来获取 Increase 和 Decrease 按钮，以及 h1 标签。接着，我们通过 fireEvent.click 方法来模拟点击 Increase 和 Decrease 按钮，并验证 h1 标签的文本内容是否正确变化。
结论
通过使用 Enzyme 工具库，我们可以快速编写高质量的测试来提高 React 应用程序的测试覆盖率。 Shallow Rendering 适合测试组件的行为和输出结果， Static Rendering 适合测试组件的静态输出和渲染方式，而 Full DOM Rendering 适合测试交互行为和组件的状态。使用 Enzyme 的这些不同测试方式，我们能够提高测试效率和覆盖率，从而保证 React 应用程序的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bc092d657e1f70dbc9b48