Enzyme 测试 React 组件时如何找到组件内部的 DOM 节点
在 React 开发中，我们经常需要测试组件的功能和交互。Enzyme 是一个流行的 React 测试工具，它提供了一组强大的 API，可以帮助我们轻松地模拟组件的渲染和交互，并且支持多种测试方式，包括断言、快照和渲染。
但是，在某些情况下，我们需要测试组件内部的 DOM 节点，例如根据用户的输入或操作，验证组件内部的某个元素是否被正确地更新或显示。在这种情况下，我们需要找到组件内部的 DOM 节点，以便进行测试。
Enzyme 提供了一些方法来获取组件内部的 DOM 节点，包括 find、findWhere 和 dive。这些方法的作用如下：
- find(selector)：通过 CSS 选择器查找组件内部的 DOM 节点。
- findWhere(predicate)：通过自定义函数查找组件内部的 DOM 节点。
- dive([options])：进入组件的子组件中，并返回一个新的 Enzyme 实例，可以在其中查找子组件的 DOM 节点。
下面是一个示例代码，演示如何使用这些方法来获取组件内部的 DOM 节点：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- -------------------------------------
------------------ -------- --- --------- ---
-- --
----- ----------- - -- -- -
----- ------- --------- - ------------------
----- ----------- - -- -- -
-------------- - ---
--
------ -
-----
--------- -----------
------- --------------------------- -----------
------
--
--
----------------------- -- -- -
---------- ------ ----- ----------- -- -- -
----- ------- - ------------------ ----
----- --------- - ------------------
------------------------------------- ----
-----------------------------------------
------------------------------------- ----
---
---在这个示例中，我们使用 mount 方法来渲染 MyComponent，并通过 find 方法获取组件内部的 p 元素，然后通过 text 方法获取元素的文本内容，并验证其是否为 'Count: 0'。接着，我们模拟点击按钮，并再次获取 p 元素的文本内容，并验证其是否为 'Count: 1'。
除了 find 方法，我们还可以使用 findWhere 方法来自定义查找条件。例如，如果我们想查找组件内部的所有 input 元素，并且它们的 value 属性都为 'hello'，我们可以这样做：
const inputNodes = wrapper.findWhere(node => node.type() === 'input' && node.prop('value') === 'hello');最后，我们还可以使用 dive 方法来查找子组件的 DOM 节点。例如，如果我们有一个父组件和一个子组件，我们可以使用 dive 方法进入子组件，并查找其内部的 DOM 节点：
const wrapper = mount(<ParentComponent />);
const childWrapper = wrapper.find(ChildComponent).dive();
const childNode = childWrapper.find('.child-node');总结
Enzyme 是一个非常强大的 React 测试工具，可以帮助我们轻松地模拟组件的渲染和交互，并提供了一组强大的 API，可以帮助我们查找组件内部的 DOM 节点。在测试组件时，我们可以使用 Enzyme 提供的 find、findWhere 和 dive 方法来获取组件内部的 DOM 节点，并进行断言、快照和渲染等多种测试方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658be66ceb4cecbf2d131ebd