什么是 Enzyme？
Enzyme 是 React 的一个测试库，它提供了简单而直观的 API，用于在测试中模拟 React 组件的行为。Enzyme 库是由 Airbnb 开发的，它以其易用性、可读性和灵活性而闻名于世。
在 Enzyme 中，有两种方法可以用于测试 React 组件：shallow 和 mount。这两种方法虽然都可以用于测试 React 组件，但在实际测试过程中，它们之间存在一些区别。
shallow 方法
shallow 方法是 Enzyme 的一种浅层渲染器，它只会渲染组件的顶层结构，而不会渲染组件内部的子组件。这意味着在使用 shallow 方法时，你可以测试组件本身的行为，而不必担心子组件的影响。
shallow 方法的好处是速度比较快，因为它只渲染了组件的一部分。另外，它也更容易编写和调试，因为它跨多个组件的级别减少了复杂性。
以下是使用 shallow 方法的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在这个示例代码中，我们使用了 shallow 方法来浅层渲染 MyComponent 组件。然后，我们通过 expect 函数来比较组件快照。这个测试用例的目的是确保组件在渲染时没有发生任何意外行为。
mount 方法
mount 方法是 Enzyme 的一种深层渲染器，它会将选定的组件及其所有子组件渲染为完整的 HTML 码。这使得你能够测试组件的完整行为，包括其子组件的行为。
mount 方法的好处是，它允许你在测试中模拟出真实的浏览器环境，从而模拟用户操作和行为。另外，它还允许你对组件的 DOM 属性进行更细粒度的控制。
以下是使用 mount 方法的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - --- - ---- -----------------------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---
---------- ------ ----- -- ------ ------- -- -- -
----- ------- - ------------------ ----
----- ------ - ---------------------------
------ -- -
-------------------------
---
--------------------------------------------
---
---在这个示例代码中，我们使用了 mount 方法来深层渲染 MyComponent 组件。然后，我们在第一个测试用例中比较了组件快照，以确保它被正确渲染。在第二个测试用例中，我们测试了组件在按钮被点击后的行为。
区别
现在，我们来对比一下 shallow 和 mount 方法之间的区别：
所有子组件 - shallow 方法只渲染了组件的顶层结构，而不会渲染组件内部的子组件。而 mount 方法会将选定的组件及其所有子组件渲染为完整的 HTML 码。
渲染速度 - shallow 方法比 mount 方法渲染速度要快，因为它只渲染了组件的一部分。
测试多个组件 - shallow 方法更容易编写和调试，因为它跨多个组件的级别减少了复杂性。
模拟 DOM 事件 - mount 方法允许你模拟 DOM 事件，以便你可以更好地测试组件的用户交互行为。
总结
在 Enzyme 中，shallow 和 mount 方法都是用于测试 React 组件的方法。它们之间的区别在于，shallow 方法只渲染了组件的顶层结构，而 mount 方法会将选定的组件及其所有子组件渲染为完整的 HTML 码。此外，shallow 方法的渲染速度更快，而 mount 方法允许你对组件的 DOM 属性进行更细粒度的控制。
在实际测试过程中，你可以根据需求使用不同的方法，以确保你的测试是完整、准确且可靠的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f46e17f6b2d6eab3d729cb