Enzyme：用于 React 组件的 JavaScript 测试实用工具
React 单页应用越来越流行，同时测试也成了平时开发的必不可少的环节。想要高效、可靠地进行测试，逃不过的就是 Enzyme 这个优秀的 React 组件 JavaScript 测试实用工具。Enzyme 可以帮助开发者在响应 DOM 渲染时快速的定位需要测试的组件，并给出明确的测试结果。本文将深入介绍 Enzyme 的使用方法和原理，并提供几个实用的示例以供参考。
安装与引入
依赖于 Jest、Mocha 等测试框架和 JSDom 渲染器，我们需要先安装这些依赖：
--- ------- ---------- ---- ----- ------ -----------------------
其中，enzyme-adapter-react-16 为 React 16 的适配器。
然后，我们需要在测试文件中引入 Enzyme：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
这样我们就完成了 Enzyme 的引入与配置。接下来就可以愉快地写测试了！
浅渲染（Shallow Rendering）
首先介绍浅渲染，也就是只渲染被测试组件本身，而不渲染它所包含的子组件。这种方式可以极大提高测试速度，使我们更专注于被测试组件本身的逻辑。
示例：测试一个简单的组件：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---上述代码中，我们首先引入 Enzyme 和要测试的组件 MyComponent，并在 describe 区块中编写测试用例。在测试用例中，我们使用了 shallow 方法进行浅渲染，然后使用 Jest 的toMatchSnapshot 方法来确认测试结果。
组件的直接渲染
当组件渲染过程需要进行更进一步的操作时，我们需要使用 ShallowWrapper.find 以及 ShallowWrapper.at 等方法来访问内部元素。
示例：测试一个自定义按钮组件，当用户点击按钮时增加计数器的值：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------ ---- -----------
------------------ -------- --- --------- ---
------------------ -- -- -
-------------- --------- -- ------- -- -- -
----- ------- - --------------- ----
---------------------------------------
-----------------------------------------
---------------------------------------
---
---上述代码中，我们首先引入 Enzyme 和要测试的组件 Button，并在 describe 区块中编写测试用例。在测试用例中，我们使用了 shallow 方法进行浅渲染，然后用 find 方法找到 button 元素，然后使用 simulate 方法模拟点击事件并确认结果是否正确。
完全渲染（Full DOM Rendering）
当我们需要测试组件及其所有子组件的完全渲染结果时，我们需要使用 Enzyme 的 mount 方法。这种方法会花费更多时间和资源，但相比其他测试方法，它的结果更准确更真实，因为它相当于在浏览器中运行和测试组件。
示例：测试一个简单的输入框组件，并检查其状态：
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----- ---- ----------
----------------- -- -- -
---------- ---- ------- ------- ------- -- -- -
----- ------- - ------------ ----
----------------------------------------
-----------------------------------------------------
------------------
---
---------- ------ ----- -- -------- -- -- -
----- ------- - ------------ ----
----- ----- - ----------------------
------------------------ - ------- - ------ ----- - ---
-------------------------------------------
----------------------------------------
------------------
---
---上述代码中，我们首先使用 mount 方法进行完全渲染，并在两个测试用例中进行测试。在第一个测试用例中，我们检查了输入框组件的初始状态并确认其是否符合预期。在第二个测试用例中，我们模拟输入框的输入操作，然后检查输入框的状态和属性是否正确。
总结
Enzyme 是一个非常实用的 React 组件 JavaScript 测试工具，我们可以用它测试组件的渲染结果，事件处理与状态更新等。在实际开发中，我们可以选择不同的渲染方式来达到不同的测试目的。希望本文对您有所帮助，让您更高效地进行 React 组件测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64afc0b948841e9894be5d63