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');
   
   // 现在我们可以基于 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');

});