Enzyme是一个专业的用于React组件测试的JavaScript测试工具库。它使得测试React组件变得更加容易。在测试组件的时候，Enzyme中主要有三个函数：shallow、mount和render。接下来我们将分别对这三个函数进行详细的介绍，并为大家提供相应的示例代码，帮助大家更好地理解这些函数的使用方法以及作用。
shallow 函数
shallow函数是Enzyme中最常用的函数之一。这个函数可以让我们只渲染出被测试组件的顶层节点，而不渲染出子组件。这样做的好处是我们可以专注于测试被测试组件的特定部分，避免子组件产生干扰。另外，由于子组件不会被实际渲染，因此测试速度也大幅提升。
下面是一个简单的使用shallow函数测试的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
----------- - ----- -- -- -
----- ------- - -------------------- ----
-------------------------------------------
---
---上面的代码中，我们使用了shallow函数来测试MyComponent组件是否正确地渲染出了一个div节点。由于我们只测试顶层节点，因此在这个测试中我们并不需要真正的MyComponent组件代码。我们可以通过创建一个空的MyComponent组件来便利地测试被测试组件的特定部分。
mount 函数
mount函数跟shallow函数相比，不仅会渲染被测试组件的顶层节点，还会渲染出组件的子组件。这样做的好处是我们可以更全面地测试组件间的交互，同时我们也可以测试子组件是否正确渲染出来。不过，由于mount函数需要进行更多的工作，因此它会比shallow函数慢一些。
下面是一个简单使用mount函数测试的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
----------- - --- --- - ------ -- -- -
----- ------- - ------------------ ----
-------------------------------------------
--------------------------------------------
---
---在这个测试中，我们测试了MyComponent组件是否正确地渲染出了一个div节点和一个span节点。由于我们使用了mount函数，因此我们也测试了MyComponent组件所包含的子组件。
render 函数
render函数跟shallow函数和mount函数有一个很大的不同，它是使用了React的非真实（virtual）DOM。这个函数需要手动将组件渲染成HTML字符串，然后才能进行测试。render函数的好处是测试速度很快，但是它不能够测试组件的交互，因此只有适用于静态组件的测试。
下面是一个简单使用render函数测试的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------ - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
----------- - --- ---- ------ -- -- -
----- ------- - ------------------- ----------- ------ ----
--------------------------------------- --------
---
---在这个测试中，我们测试了MyComponent组件是否正确地渲染出了一个包含text属性值的div节点。由于我们使用了render函数，因此我们不能测试组件的交互，因此只有适用于静态组件的测试。
总结
在使用Enzyme进行React组件测试时，我们可以使用shallow函数、mount函数和render函数来测试组件。这些函数各有优缺点，因此我们需要根据实际情况选择合适的函数。在测试组件时，我们需要专注于测试被测试组件的特定部分，避免子组件产生干扰，同时我们也要测试组件间的交互，以保证组件的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64670434968c7c53b076e325