前言
在开发前端项目时，我们常常需要使用第三方的组件库，这时我们需要进行单元测试，而 Enzyme 作为 React 的一个单元测试工具，可以帮助我们轻松地测试 React 组件的行为。在进行 Enzyme 测试时，我们需要查找渲染后的 DOM 元素，有时我们需要根据类名来查找元素，这时就可以使用 Enzyme 中的 findRenderedDOMComponentWithClass 方法。
findRenderedDOMComponentWithClass 方法的作用
findRenderedDOMComponentWithClass 方法是 Enzyme 提供的一种方法，用于在渲染后的 DOM 树中查找特定类名的元素。这个方法接收两个参数，第一个参数是要查询的组件实例，第二个参数是要查找的类名。
使用方法
使用 findRenderedDOMComponentWithClass 方法的前提是，我们已经有了要测试的 React 组件实例，这个组件已经被渲染到了虚拟 DOM 中，并且已经通过 Enzyme 的 mount 或 render 方法得到了包装后的组件。
在使用 findRenderedDOMComponentWithClass 方法时，我们需要传入两个参数：第一个参数是要查询的组件实例，第二个参数是要查找的类名。
-- -------------------- ---- -------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ --- ---- --------
------------------ -------- --- --------- ---
------------- ----------- -- -- -
---------- ------ - ------ ---- ----- ------- -- -- -
----- ------- - ---------- ----
----- ------ - ---------------------------------------------- -------
-----------------------------
---
---在上述示例中，我们首先通过 mount 方法将 Foo 组件渲染到虚拟 DOM 中，并得到了一个包装后的 wrapper，接下来通过 findRenderedDOMComponentWithClass 方法查找 wrapper 中的 Foo 组件，并传入要查找的类名 'btn'。
如果查找到了符合条件的元素，findRenderedDOMComponentWithClass 方法会返回一个包含该元素的实例。如果没有找到，则返回 undefined。在上述示例中，我们使用了 Jest 的断言 expect 来判断 button 对象是否被定义，即是否成功找到了元素。
注意事项
我们在使用 findRenderedDOMComponentWithClass 方法时，需要注意一些细节。
多个元素
findRenderedDOMComponentWithClass 方法只返回第一个找到的符合条件的元素。如果我们需要查找多个符合条件的元素，可以使用 findRenderedDOMComponentsWithClass 方法。这个方法返回一个包含所有符合条件的元素的数组。
组件的重复渲染
如果一个组件被多次渲染，在每次渲染后都有可能触发 Enzyme 的 componentDidUpdate 函数，这就会导致组件树中的组件实例发生变化。这时我们就不能再使用 findRenderedDOMComponentWithClass 方法来查找改变后的组件实例了，需要重新调用 mount 或 render 方法来得到最新的组件实例。
组件的失效
另外，如果一个组件在某个时刻被移除或失效了，那么通过 findRenderedDOMComponentWithClass 方法查找该组件的元素将会失败，因为 Enzyme 不能再渲染该组件。这时我们需要检查组件树中是否存在该组件，如果不存在则需要调整测试用例的逻辑。
总结
通过本文的介绍，我们了解了 Enzyme 中使用 findRenderedDOMComponentWithClass 方法根据类名查找渲染后的 DOM 元素的方法与技巧。在进行 React 组件单元测试时，我们可以使用这个方法来查找需要测试的元素，并对该元素的属性和行为进行断言。同时，我们也需要注意多个元素、组件的重复渲染和组件的失效等问题，以确保测试用例的正确性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503d70c95b1f8cacd0a1244