React 组件的测试是前端开发的重要一步，而 Enzyme 就是 React 的一个测试工具。Enzyme 允许开发者对 React 组件进行深度的测试，同时也可以对组件的渲染结果进行全面的检查。在进行 React 组件测试时，开发者通常会使用 mount() 和 shallow() 两种测试方法。这篇文章将向你介绍如何使用 mount() 和 shallow() 这两种方法，以及它们的差异化测试策略。
Mount() 方法
Mount() 方法可以将 React 组件渲染至真实的 DOM 树中，这么做会涉及到组件和它的子组件的生命周期函数，包括 componentDidMount() 和 componentWillUnmount() 等。因此，mount() 方法是用来测试真实环境下组件的渲染和交互情况的。
在 Enzyme 中，使用 mount() 方法渲染组件如下所示：
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ------- ---- --------- -- -- -
----- ------- - ------------------ ----
-------------------------------------- ---------
---
---上述代码中，我们使用 import 导入 Enzyme 的 mount() 方法，然后在测试用例里，使用 mount() 方法渲染了一个名为 MyComponent 的组件。之后，我们可以使用 expect() 断言 wrapper.text() 中的横幅信息是否正确。
在使用 mount() 方法时，注意要指出你要测试的组件，同时去除有状态的父组件，以保证只测试你所需要的组件。
Shallow() 方法
和 mount() 的测试思路不同，shallow() 方法只会测试当前组件，而不会涉及到测试组件子代的生命周期和一次性行为。这种“视图”测试方式，使得 shallow() 方法更适合进行组件 API 和属性测试，同时也能更好地测试纯函数性组件。
在 Enzyme 中，使用 shallow() 方法渲染组件如下所示：
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ------- ---- --------- -- -- -
----- ------- - -------------------- ----
------------------------------------------------- ---------
---
---上述代码中，我们使用 import 导入 Enzyme 的 shallow() 方法，然后在测试用例里，使用 shallow() 方法渲染了一个名为 MyComponent 的组件。之后，我们可以使用 expect() 断言 wrapper.find() 中的 h1 元素是否存在，并且其文本内容是否为“Hello, World!”。
和使用 mount() 方法进行测试的情况类似，使用 shallow() 方法时，也要注意去除有状态的父组件，以保证只测试你所需要的组件。
测试案例举例
假设我们的项目有一个 Image 组件，它的 props 包含 src, alt 和 fallback。图片加载过程中可能出现错误，这时候就需要显示一个备用图片。
考虑到在不同的加载状态下 Image 组件的渲染，我们可以分别使用 mount() 和 shallow() 方法进行测试。
mount() 方法测试：
------ - ----- - ---- ---------
------ ----- ---- ----------------------------
--------------- ----------- -- -- -
----- ----- - -
---- -------------------------------------------
---- -------------
--------- ---------------------------------------------------
-
----------- ---- --- ------- --- ----- -- -- -
----- --------- - ------------ ---------- ----
----- --- - ----------------------
-------------------------------------------
---
----------- -------- --- -- ------- -- -- -
----- --------- - ------------ ---------- ----
----------------------------------------
----- --- - ----------------------
------------------------------------------------
---
----------- ---- --- ------- --- ------ -- -- -
----- --------- - ------------ ---------- ----
----- --- - ----------------------
-------------------------------------------
---
---上述代码中，我们测试了 Image 组件的三种可能情况：第一种是正确加载渲染图片的情况，第二种是加载失败的情况，第三种是检查 alt 属性的情况。我们使用了 mount() 方法测试整个组件，并使用断言来验证我们测试的结果是否正确。
shallow() 方法测试：
------ - ------- - ---- ---------
------ ----- ---- ----------------------------
--------------- ----------- -- -- -
----- ----- - -
---- -------------------------------------------
---- -------------
--------- ---------------------------------------------------
-
----------- ---- --- ------- --- ----- -- -- -
----- --------- - -------------- ---------- ----
----- --- - ----------------------
-------------------------------------------
---
----------- -------- --- -- ------- -- -- -
----- --------- - -------------- ---------- ----
----------------------------------------
----- --- - ----------------------
------------------------------------------------
---
----------- ---- --- ------- --- ------ -- -- -
----- --------- - -------------- ---------- ----
----- --- - ----------------------
-------------------------------------------
---
---上述代码中，我们测试了 Image 组件的三种可能情况：第一种是正确加载渲染图片的情况，第二种是加载失败的情况，第三种是检查 alt 属性的情况。与使用 mount() 方法测试不同的是，我们使用 shallow() 方法进行测试。同样地，我们使用断言来验证我们测试的结果是否正确。
当我们分别测试了这三种情况时，mount() 方法和 shallow() 方法都能达到预期的效果。shallow() 方法比 mount() 方法更加快速和轻量，同时又可以保证测试的准确性。但是，有时候如果我们需要展示一些组件的子组件的逻辑，或者有些组件在组装的时候产生了一些副作用，我们就需要选择 mount() 方法进行测试。
结论
在这篇文章中，我们介绍了 Enzyme 的两种测试方法：mount() 和 shallow()，并分别针对 Image 组件进行了测试。这种测试方法的选择取决于你所需要的测试类型和测试目的。当你测试一个组件时，要根据实际情况选择相应的测试方法，以确保测试的准确性和成功率。希望这篇文章能帮助你更好地使用 Enzyme 进行 React 组件测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66f6e166c5c563ced58ccd69