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 元件的最終結果中找到一個特定元素。假設我們有一張一群人的照片，我們想找到戴紅帽的人，我們將使用此函式在照片中找到這個人。它是測試的有用工具，可以確保我們的元件按預期工作。