在开发前端应用的过程中，调试组件是非常常见的任务。React 组件是由构建块组成的，测试这些构建块需要一些工具来简化这个过程。而 Enzyme 就是一个流行的 React 组件测试工具。
Enzyme 是由 Airbnb 开源的一个 React 组件测试工具。它的优点在于它提供了一种简单的方式来命令式地测试 React 组件，同时也为深度和可读性提供了很多有用的工具。
安装和设置
在开始使用 Enzyme 之前，我们需要先安装和设置它。我们可以通过 NPM 来安装 Enzyme，如下所示：
npm install --save-dev enzyme react-test-renderer enzyme-adapter-react-16
然后，在我们的测试文件中，我们需要设置 Enzyme 以在测试期间与 React 一起使用。要做到这一点，我们需要通过适配器将 Enzyme 连接到 React。我们将适配器传递到 Enzyme 的配置中，以确保正确设置。以下是一个示例配置：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });测试基础
在我们实际开始测试之前，我们需要知道 Enzyme 为我们提供了三种不同的包装器，每种都有不同的测试重点。它们分别是：
shallow：它是用于浅渲染组件树的包装器。这基本上意味着只渲染当前组件，并不考虑嵌套组件的实现。这使得我们可以在不繁琐地测试整个组件树的情况下，测试组件的某些方面。mount：它按照组件树中的实际渲染方式，完全渲染组件树，并将组件包装在一个JSX中。这使得我们可以完全测试组件及其所有嵌套组件。render：这个包装器将组件呈现为静态 HTML，并通过 Cheerio 提供一个 jQuery 插件式的方式从输出中查询内容。这使得我们可以在没有 DOM 的情况下测试组件的方式。
接下来，我们了解如何使用这些不同的包装器来测试一个简单的 React 组件，它显示一个标题和一个文本。
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- - -- ------ ------ -- -
-----
----------------
-------------
------
--
------ ------- ------------首先，我们使用 shallow 包装器进行浅渲染测试，以确保组件呈现正常：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
--------------------- ------- ------- -- -- -
----------- - ----- --- - ------ -- -- -
----- ------- - -------------------- ------------ ------------ ----
--------------------------------------------------
--------------------------------------------------
---
---我们使用了 shallow 根据 props 数据渲染 MyComponent 组件，并查找 h1 和 p 标签是否存在，真正的测试是测试这些标签是否呈现了我们所期望的文本。
接下来，我们使用 mount 包装器对整个组件和所有嵌套组件进行测试：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
--------------------- ----- ------- -- -- -
----------- - ----- --- - ------ -- -- -
----- ------- - ------------------ ------------ ------------ ----
--------------------------------------------------
--------------------------------------------------
---
---我们使用了 mount 进行完全渲染，然后查找 h1 和 p 标签以确保它们已呈现。
更深入的测试
Enzyme 提供了各种选择来更深入地测试组件。我们演示一些示例来展示如何深入测试我们的组件。
模拟点击事件
我们可以使用 simulate 方法来模拟 UI 事件，例如点击事件。以下是一个示例，我们使用 shallow 解包 MyComponent 组件，并模拟一个点击事件：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
--------------------- -------- ------- -- -- -
------------- - ----- -- --- ---- -- -- -
----- ------- - -------------------- ------------ ------------ ----
-------------------------------------
----------------------------------------------------------------------
---
---通过状态测试或更改状态
我们可以直接访问 state 和 props，就像访问一个普通的对象一样。这允许我们测试根据状态或属性呈现不同视图的组件的行为。以下是一个浅入测试，我们更改了 MyComponent 组件的状态，以确保它呈现正确的值：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
--------------------- ----- ------- -- -- -
----------- ----- ------- ------- -- -- -
----- ------- - -------------------- ------------ ------------ ----
------------------ ------ -------- ----- ---
-------------------------------------------------- -------
---
---快照测试
快照测试是一种测试方式，它会记录一个组件的渲染内容并保存为静态文件。每次渲染组件时，快照测试会将结果与静态文件进行比较，并生成新的快照文件。如果快照文件与新的渲染结果不匹配，那么测试将失败。以下是一个浅入测试示例，展示如何使用快照测试：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
--------------------- -------- ------- -- -- -
---------- ----- --- ---------- -- -- -
----- ------- - -------------------- ------------ ------------ ----
----------------------------------
---
---我们可以在项目根目录下创建一个 __snapshots__ 文件夹，里面存放着快照文件，以便与新的渲染结果进行比较和更新。
结论
在本文中，我们深入介绍了用于调试 React 组件的 Enzyme 工具。我们了解了 Enzyme 的基本测试概念，并对三种不同的包装器进行了详细介绍。此外，我们还演示了一些深入的测试方法来测试组件的其他方面。当你遇到 React 组件调试时，请优先考虑使用 Enzyme 进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee5acf6fbf960197216f85