在使用 React 进行前端开发时，我们通常会采用 Enzyme 进行组件单元测试。然而，在测试子组件时，往往会出现无法找到节点的情况，这给测试工作带来了巨大的困难。针对这种情况，本文将向大家介绍如何解决 Enzyme 测试子组件引起的 “找不到节点” 问题。
问题分析
我们在测试子组件时，通常会采用浅渲染（shallow rendering）的方式进行测试。浅渲染只会渲染组件本身，而不会渲染其子组件。在这种情况下，我们难以获取子组件的节点。
例如，我们有一个父组件，其中包含了一个子组件 ChildComponent：
-- -------------------- ---- -------
----- --------------- ------- --------------- -
-------- -
------ -
---- -----------------------------
--------------- --
------
--
-
-
----- -------------- ------- --------------- -
-------- -
------ -
---- ----------------------------
--------- ----------
------
--
-
-我们希望测试 ChildComponent 组件的渲染结果，因此编写了如下测试代码：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ -------------- ---- -------------------
-------------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ----------------------- ----
--------------------------------------------------------
------------------------------------------------ --------
---
---但是，我们会发现这个测试用例运行时会失败。原因是我们无法通过 wrapper.find('h1') 找到该节点。这是因为我们采用了浅渲染的方式，而 h1 元素是在 ChildComponent 中被渲染出来的，而不是在父组件 ParentComponent 中。
解决方案
为解决这个问题，我们可以采用另外一种渲染方式：深渲染（mount rendering）。深渲染会渲染整个组件树，因此可以获取到子组件的节点。
我们将测试代码改写如下：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ --------------- ---- --------------------
-------------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------------- ----
--------------------------------------------------------
------------------------------------------------ --------
---
---这次测试用例将会运行成功，因为我们采用了深渲染的方式，从而正确获取了 h1 元素的节点。
总结
在测试子组件时，我们需要注意使用合适的渲染方式，以获取子组件的节点。针对上述的问题，我们可以采用深渲染的方式进行测试，从而解决 找不到节点 的问题。
值得注意的是，深渲染会渲染整个组件树，因此性能较低，且容易受到外部因素的影响。在进行单元测试时，我们应该根据具体情况选择适合的渲染方式，以保证测试的准确性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659135a0eb4cecbf2d66dd69