ReactJS - findRenderedDOMComponentWithClass()

---

---

在 ReactJS 中，`findRenderedDOMComponentWithClass()` 方法用于测试。它帮助我们找到 DOM 中具有特定 CSS 类的已渲染组件。此方法主要用于测试 React 组件。

当为我们的 React 组件编写测试时，我们可以检查具有给定 CSS 类的组件是否出现在渲染输出中。这正是 `findRenderedDOMComponentWithClass()` 的作用。因此，我们将此函数传递给已渲染的组件和我们想要的 CSS 类。然后返回具有该类的第一个 DOM 元素。

请记住，此函数在早期版本的 React 和测试框架中更常用。更新的测试库可以提供不同的方法来实现相同目标。

语法

findRenderedDOMComponentWithClass(
   tree,
   className
)

参数

• tree − 它是我们想要在其中搜索的显示组件或组件树。它是我们 React 组件的渲染输出，来自测试库。

• className − 表示我们想要在树中查找的 CSS 类的字符串。该方法将搜索具有此特定类的 DOM 元素。

返回值

该方法将返回具有给定类的第一个 DOM 元素，使我们可以继续进行测试并执行其他操作或断言。

示例

示例 - 基本 React 应用

应用说明：这就像一个网页，在网页上显示“Hello, React！”。想象一下它是一张简单的贺卡。

测试说明 - 我们要确保贺卡的特定部分（段落）存在。因此，我们使用一个工具来查找该部分并检查它是否符合我们的要求。

App.js

import React from 'react';
import './App.css';

function App() {
   return (
      <div className="app-container App">
         <h1>Hello, React!</h1>
         <p className="app-paragraph">This is a simple React app.</p>
      </div>
   );
}

export default App;

App.test.js

import { render } from '@testing-library/react';
import findRenderedDOMComponentWithClass from 'path-to-findRenderedDOMComponentWithClass';
import App from './App';

test('finds a paragraph with a specific class', () => {
   const { container } = render(<App />);
   const foundElement = findRenderedDOMComponentWithClass(container, 'app-paragraph');
   
   // Now we can make assertions or tests based on foundElement
});

输出

示例 - 带有组件的 React 应用

应用说明 - 在应用程序中，假设我们有一个网页，网页有一个标题（页眉）和一个段落。它就像一个小型网站，顶部有一个标题。

测试说明 - 我们要确保标题存在。因此，我们使用一个工具来查找标题并检查它是否在正确的位置。

Header.js

import React from 'react';

function Header() {
   return <h1 className="header-title">Welcome to My App</h1>;
}

export default Header;

App.js

import React from 'react';
import Header from './Header';
import './App.css';

export default function App() {
   return (
      <div className="app-container">
         <Header />
         <p className="app-paragraph">This app has a header component.</p>
      </div>
   );
}

App.test.js

import { render } from '@testing-library/react';
import findRenderedDOMComponentWithClass from 'path-to-findRenderedDOMComponentWithClass';
import App from './App';

test('finds a header with a specific class', () => {
   const { container } = render(<App />);
   const foundElement = findRenderedDOMComponentWithClass(container, 'header-title');

});

输出

示例 - 带有动态内容的 React 应用

应用说明 - 这就像一个可以显示不同消息的网页。它有点像可以显示变化信息的告示牌。

测试说明 - 我们要确保变化的消息存在。因此，我们使用一个工具来查找该部分并检查它是否显示了正确的消息。

DynamicContent.js

import React from 'react';

function DynamicContent({ content }) {
   return <div className="dynamic-content">{content}</div>;
}

export default DynamicContent;

App.js

import React from 'react';
import DynamicContent from './DynamicContent';
import './App.css';

function App() {
   return (
      <div className="app-container App">
         <DynamicContent content="This content is dynamic!" />
         <p className="app-paragraph">This app includes dynamic content.</p>
      </div>
   );
}

App.test.js

import { render } from '@testing-library/react';
import findRenderedDOMComponentWithClass from 'path-to-findRenderedDOMComponentWithClass';
import App from './App';

test('finds a dynamic content with a specific class', () => {
   const { container } = render(<App />);
   const foundElement = findRenderedDOMComponentWithClass(container, 'dynamic-content');

});

输出

总结

此函数用于测试 React 组件。当我们运行测试时，它帮助我们在 React 组件的最终结果中找到一个特定元素。假设我们有一张一群人的照片，我们想找到戴红帽的人，我们将使用此函数在照片中找到这个人。它是测试的有用工具，可以确保我们的组件按预期工作。