Enzyme 是 ReactJS 生态中最受欢迎的测试库之一。它提供了许多方便的 API 来测试 React 组件和行为。在进行 React 组件测试时，有两种常见的方法： shallow rendering 和 full rendering。本文将讨论这两种方法的区别以及在何时使用特定方法进行测试。
shallow 方法
shallow rendering 是 React 组件测试的基本形式。shallow 方法通过渲染 React 组件的虚拟DOM树并拦截所有渲染行为，从而避免了子组件的渲染。这样，我们可以更快地进行测试，并且只需要关注我们真正要测试的组件。 此外，我们可以递归传递 props，并在测试用例中修改它们进行测试。
shallow 方法的优点：
- 快速，因为测试只涉及一个组件
- 只测试组件本身, 不会受子组件的影响
- 更容易理解和维护
shallow 方法的缺点：
- 无法检测子组件
- 无法使用生命周期和 ref 钩子
下面是一个示例组件：
------ ----- ---- --------
----- ------ - -- -------- -------- -- -- -
------ -
------- ------------------
----------
---------
--
-
------ ------- -------可以使用 Enzyme 的 shallow 方法测试此组件：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
----------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - ----------
----- ------- - --------
------- ----------------------- -----------
--
----------------------------------
---
--------- ------- ---- ---- --------- -- -- -
----- ------- - ----------
----- ------- - --------
------- ----------------------- -----------
--
--------------------------
-----------------------------------
---
---full rendering 方法
full rendering 是 React 测试的第二种渲染形式。full rendering 将渲染整个组件树，并包含子组件及其行为。这通常会花费更多的时间，但也可以提供更深入的测试，且可以测试组件中的生命周期和 ref 钩子。
full rendering 方法的优点：
- 可以测试子组件及其行为
- 可以使用生命周期和 ref 钩子
full rendering 方法的缺点：
- 比 shallow rendering 慢
- 对于大型应用程序，渲染树可能太大而难以管理
下面是一个示例组件：
------ ------ - -------- - ---- --------
----- -------- - -- -- -
----- ------- --------- - -------------
----- ------------ -------------- - -------------
----- ------------ - --- -- -
-------------------
-- ------------------- -
------------------- - --- ----------- ----- ---------- ----
------------------
-
--
------ -
-----
----- ------------------------
------ ------------------ ----------- -- ------------------------------ --
------- ----------------- -------------
-------
----
--------------- -- -
--- ------------------------------
---
-----
------
--
--
------ ------- ---------可以使用 Enzyme 的 mount 方法测试此组件：
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - --------------- ----
----------------------------------
---
-------- - --- ---- ---- ---- ----------- -- -- -
----- ------- - --------------- ----
----- ----- - ----------------------
----- ------ - -----------------------
------------------------ - ------- - ------ ---- ----- - ---
--------------------------
-------------------------------------------
---
---结论
在测试 React 组件时，我们需要根据测试场景和需求选择渲染方法。如果我们想快速测试组件的行为，可以使用 shallow 方法进行测试。当需要测试子组件行为或更深层次的生命周期钩子时，可以使用 full rendering。无论您选择哪种测试渲染形式，Enzyme 的 API 可以使测试变得更加容易和简单。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67107b5e5f551281026b71e7