在 React 开发中，我们经常使用 Enzyme 这个库来进行组件测试。在测试过程中，涉及到了对于子组件的处理，那么本文将会详细介绍 Enzyme 中如何处理子 React 组件。
常用 API
Enzyme 有三种常用的 API：find()、shallow() 和 mount()。
find()
find() 用于查找指定的选择器，并返回一个新的包含了所有匹配元素的 Enzyme 对象。这个 API 可以用来遍历一个已有的 Enzyme 对象，查找匹配的元素，其返回值为一个新的 Enzyme 对象。如：
-- -------------------- ---- -------
------ - ------- - ---- --------
------ ------------- ---- ----------------------------
------------------------ ---- -- -- -
---------- ---- - ------ ---- ----- ------------ -- -- -
----- ------- - ---------------------- ---
----- --------- - -------------------------
-----------------------------------
--
--shallow()
shallow() 用于浅化渲染 React 组件，无需渲染出完整的 DOM 层次结构。这个 API 会只渲染组件的直接子组件，返回值也是一个新的 Enzyme 对象。如：
-- -------------------- ---- -------
------ - ------- - ---- --------
------ ------------- ---- ----------------------------
------------------------ ---- -- -- -
----------- --------- - --------- ------ --- ------ ----- ------------ -- -- -
----- ------- - ---------------------- ---
-- -------------- ---- --- -- --------
----- ---------- - -----------------------------------
-----------------------------
--
--mount()
mount() 用于完整渲染 React 组件及其子组件，渲染出完整的 DOM 层次结构。这个 API 会让组件及其所有子组件都被完整地挂载到 DOM 上，可以进行后续的 DOM 操作，返回值也是一个新的 Enzyme 对象。如：
-- -------------------- ---- -------
------ - ----- - ---- --------
------ ------------- ---- ----------------------------
------------------------ ---- -- -- -
--------- - --------- -- --- ----- -- -- -
----- ------- - -------------------- ---
-- ---------- --- ---
--------------------------------------
--------------------------------
--
--子组件查找
Enzyme 中，通过 find() 可以查找子组件。当然，这是需要指定子组件的选择器，可以通过 className、id、标签名或其他一些属性进行匹配。
通过 className 查找
-- -------------------- ---- -------
------ - ------- - ---- --------
------ ------------- ---- ----------------------------
------------------------ ---- -- -- -
---------- ---- --- ----- --------- -- ----------- -- -- -
----- ------- - ---------------------- ---
----- ------------ - --------------------------------
-------------------------------------------
--
--通过 id 查找
-- -------------------- ---- -------
------ - ------- - ---- --------
------ ------------- ---- ----------------------------
------------------------ ---- -- -- -
---------- ---- --- ----- --------- -- ---- -- -- -
----- ------- - ---------------------- ---
----- ------------ - --------------------------------
-------------------------------------------
--
--通过标签名查找
-- -------------------- ---- -------
------ - ------- - ---- --------
------ ------------- ---- ----------------------------
------ -------------- ---- -----------------------------
------------------------ ---- -- -- -
---------- ---- --- ----- --------- -- --- ------ -- -- -
----- ------- - ---------------------- ---
----- ------------ - ----------------------------
-------------------------------------------
--
--通过属性查找
-- -------------------- ---- -------
------ - ------- - ---- --------
------ ------------- ---- ----------------------------
------------------------ ---- -- -- -
---------- ---- --- ----- --------- -- --- ------ -- -- -
----- ------- - ---------------------- ---
----- ------------ - ------------------
------ -- ---------------------- --- -----------------
-
-------------------------------------------
--
--以上示例代码，可以帮助我们更准确且方便的定位子组件，在测试中避免选择器出错的情况发生。
子组件模拟
Enzyme 不仅可以查找子组件，我们还可以使用 Enzyme 的实例对象模拟子组件的 props 和状态，以便进行组件测试。例如，我们有一个组件 ParentComponent，其中包含了一个子组件 ChildComponent：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------------- ---- ------------------
----- --------------- - -- -- -
----- ------- --------- - ---------------------
----- ----------- - -- -- -
----------------
-
------ -
-----
---------- --------------
--------------- ---------------- ------------------------- --
------
-
-
------ ------- ---------------那么我们可以使用 Enzyme 实例对象来模拟 ChildComponent 组件，设定其 props 和状态，以便单元测试：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ --------------- ---- -------------------
------ -------------- ---- ------------------
-------------------------- ---- -- -- -
---------- ------ --- --------- -- -------------- ---- -------- --- -------- -- -- -
----- ------- - ------------------------ ---
-- ---- --- ------- ----- -- --------------
-----------------------------------------------------------------
-- -------- -------- --- ------
--------------------------------------
-- ---- --- --- ----- -- --------------
----------------------------------------------------------------
--
--总结
Enzyme 提供了方便多样的 API，可以帮助我们在 React 组件的测试中定位到子组件，并模拟所需的 props 和状态，更加准确地进行组件测试。培养熟练使用 Enzyme API 的能力，可以为我们的开发工作提供极大的便利。
希望本文的内容能够帮助您更好的了解 Enzyme 中的子组件操作，让您能够更加轻松地进行组件测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ab1a648841e98948cb99c