ReactJS - findRenderedDOMComponentWithClass()

---

---

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

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

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

语法

findRenderedDOMComponentWithClass(
	 	tree,
	 	className
)

参数

• tree - 它是我们想要在其中搜索的显示组件或组件树。它是我们的 React 组件的渲染输出，从测试库接收。
• className - 一个字符串，表示我们想要在树中找到的CSS类。该方法将搜索具有此特定类的 DOM 元素。

返回值

该方法将返回具有给定类的第一个 DOM 元素，允许我们使用其他操作或断言继续测试。

例子

示例 - 基本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 组件的最终结果中找到特定元素。假设我们有一群人的照片，我们想找到一个戴着红帽子的人，我们将使用这个函数来定位图片中的那个人。它是一个有用的测试工具，可以确保我们的组件按预期运行。