Enzyme 是一个 React 应用程序的 JavaScript 测试实用程序库。它由 Airbnb 开发，使得在实施单元测试和集成测试时，可以更加轻松地访问和操作 React 组件的输出。以下是如何在 React 中使用 Enzyme 进行渲染测试的指南。
什么是 Enzyme？
Enzyme 是一个非常流行的开源测试工具，提供了一组丰富的 API，可以用于测试 React 组件的输出。 Enzyme 可以让开发者更精确地测试 React 应用程序的某些单独组件，而无需在实际 Web 浏览器上运行 OpenQA 测试。 Enzyme 支持模拟 React 组件，从而非常适合于测试工作流程。
Enzyme 支持多种渲染方法，包括 shallow、mount 和 render。其中，shallow 主要用于浅层渲染，可以避免子组件的影响；mount 基于全DOM API，可以生成完整的 DOM 节点；而 render 可以将组件渲染为静态 HTML，它使用类似 Cheerio 的 API，非常适合服务器端渲染。
安装 Enzyme
可以使用 npm 或 yarn 进行 Enzyme 的安装：
--- ------- ---------- ------ -----------------------
或者
---- --- ----- ------ -----------------------
配置 Enzyme
Enzyme 需要 Adapter 来适配不同版本的 React，需要引入适配器来进行配置：
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
浅层渲染（shallow）
在 Enzyme 中，使用 shallow 方法来进行浅层渲染。 shallow 方法只渲染当前组件，而不必渲染子组件，因此速度较快。浅层渲染允许检查渲染组件的行为或检查渲染输出的某些特定方面。
下面是一个示例代码：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- -------------- --
------------ ----------- -- -- -
------------- ----- ----------- -- -- -
----- ------- - -------------------- ----
------------------------------------------ ------------
---
---在此例中，使用 shallow 方法渲染 MyComponent，并查找其中的 h1 标签。此测试检查输出中的标题是否正确，并保证正确性。
全渲染（mount）
mount 方法将组件完整地渲染到 DOM 中，因此可以对子组件和 DOM 对象进行更深入的测试。这是一项更耗时的操作，应该保持尽可能少的使用。
下面是一个示例代码：
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
------------ ----------- -- -- -
------------- -------- ---- -------- -- -- -
----- -------------- - --------- ---------------
----- ------- - ---------------------------------------------------
----------------------------------------------------------------------
---
---在此例中，使用 mount 方法渲染 MyComponent，并传入一个名为 childComponent 的子元素。该测试验证了组件是否从其 props 中正确呈现了子元素。
静态渲染（render）
render 方法将渲染输出为静态 HTML，并返回一个类似于 Cheerio 的 API。这使开发者可以使用基于 DOM 的选择器和操作来测试组件输出。
下面是一个示例代码：
------ ----- ---- --------
------ - ------ - ---- ---------
------ ----------- ---- ----------------
------------ ----------- -- -- -
------------- ----------- -- -- -
----- ------- - ------------------- ----
-------------------------------------------
---
---在此例中，使用 render 方法渲染 MyComponent，并查找包含 h1 标签的元素。该测试检查了元素是否存在，以验证组件是否已正确呈现。
测试组件方法
有时候需要测试组件中的方法，可以使用 instance() 方法获得实例，并直接调用方法进行测试。
下面是一个示例代码：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
------------ ----------- -- -- -
----------------- ------- ----- ----------- -- -- -
----- ------- - -------------------- ----
----- -------- - -------------------
---------------------------------------------
-----------------------
--------------------------------------------
---
---在此例中，使用 instance() 方法获取组件实例，然后测试 handleClick 方法是否正确。使用 find() 和 simulate() 方法来测试组件的操作和行为。
结论
Enzyme 容易学习和使用，提供了一种方便的方式来测试 React 组件。使用 shallow 方法进行浅层渲染，可以快速测试组件的某些特定方面。使用 mount 方法进行全渲染，可以对子组件和 DOM 对象进行更深入的测试。使用 render 方法进行静态渲染，可以测试组件输出，而无需使用 React DOM。
这些测试提供了针对组件行为、状态和呈现的确切控制力。使用 Enzyme，可以编写完整的测试套件，以验证 React 应用程序在不同情况下的运行情况，从而提高代码质量和应用程序的健壮性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670904cdd91dce0dc875dd05