ReactJS - scryRenderedDOMComponentsWithClass()

---

---

眾所周知，React 是一個非常流行的庫，用於建立響應式和互動式的 Web 應用程式。React 庫中有一個名為 scryRenderedDOMComponentsWithClass() 的函式。此函式在渲染的樹中查詢所有元件的 DOM 元素。它查詢與我們指定的類名匹配的 DOM 元件。

假設我們有一棵樹，類似於家譜，但用於我們的網站。每個分支象徵著我們網站的一個獨立部分。現在，scryRenderedDOMComponentsWithClass() 遍歷每個分支並選擇具有特定類的元素。

語法

scryRenderedDOMComponentsWithClass(
   tree,
   className
)

引數

在括號內放入兩件事：tree 和 className。

• tree - tree 這個詞指的是我們的家譜。

• className - className 類似於指示函式“查詢具有此特定名稱或類的內容”。

返回值

此函式返回顯示的樹的所有元件的 DOM 元素列表，這些元素與給定的類名匹配。

scryRenderedDOMComponentsWithClass() 函式通常用於測試 React 元件。它是 React TestUtils 包的一部分，React TestUtils 包用於透過多種方法測試 React 元件。因此，我們將看到在不同的測試場景中使用 scryRenderedDOMComponentsWithClass() 的不同方法。

示例

示例 - 測試計數器元件

假設我們有一個計數器元件，我們需要對其進行測試。

CounterComponent.js

import React, { useState } from 'react';

const CounterComponent = () => {
   const [count, setCount] = useState(0);   
   const increment = () => {
      setCount(count + 1);
   };   
   return (
      <div>
         <p className="counter-display">Count: {count}</p>
         <button className="increment-btn" onClick={increment}>
            Increment
         </button>
      </div>
   );
};

export default CounterComponent;

CounterComponent.test.js

import React from 'react';
import { render, scryRenderedDOMComponentsWithClass } from '@testing-library/react';
import CounterComponent from './CounterComponent';

test('Counter increments correctly', () => {
   const { container } = render(<CounterComponent />);
   const incrementButton = scryRenderedDOMComponentsWithClass(container, 'increment-btn')[0];   
   expect(incrementButton).toBeDefined();   
   incrementButton.click();
   
   // Check if the count has been updated
   const counterDisplay = scryRenderedDOMComponentsWithClass(container, 'counter-display')[0];
   expect(counterDisplay.textContent).toBe('Count: 1');
});

輸出

解釋 - 這類似於一個神奇按鈕，它跟蹤我們點選它的次數。當我們開啟網站時，我們會注意到一個按鈕，上面寫著“點選我！”和一個計數。每次按下按鈕，數字都會增加 1。這就像跟蹤我們點選按鈕的次數。

示例 - 測試切換可見性

假設我們有一個 React 應用，其中我們有一個切換可見性功能。因此，當我們點選按鈕時，它將可見，如果我們再次按下按鈕，內容將消失。

ToggleComponent.js

import React, { useState } from 'react';
import './App.css';

const ToggleComponent = () => {
   const [isVisible, setIsVisible] = useState(true);   
   const toggleVisibility = () => {
      setIsVisible(!isVisible);
   };
   
   return (
      <div className='App'>
         <button className="toggle-btn" onClick={toggleVisibility}>
            Toggle Visibility
         </button>
         {isVisible && <p className="visible-content">This content is visible!</p>}
      </div>
   );
};

export default ToggleComponent;

ToggleComponent.test.js

import React from 'react';
import { render, scryRenderedDOMComponentsWithClass } from '@testing-library/react';
import ToggleComponent from './ToggleComponent';

test('Toggle visibility correctly', () => {
   const { container } = render(<ToggleComponent />);
   const toggleButton = scryRenderedDOMComponentsWithClass(container, 'toggle-btn')[0];   
   expect(toggleButton).toBeDefined();
   
   // Simulate a click on the button
   toggleButton.click();
   
   // Check if the content is now hidden
   const visibleContent = scryRenderedDOMComponentsWithClass(container, 'visible-content');
   expect(visibleContent.length).toBe(0);
});

輸出

解釋 - 讓我們測試我們隱藏和顯示專案的按鈕。我們告訴程式碼點選按鈕以檢視是否有任何內容出現，然後再次按下它以檢視它是否消失。如果我們的程式碼回答“是的，隱藏和顯示工作正常！”，我們就知道我們的按鈕正在工作。

示例 - 測試列表過濾器元件

假設我們有一個過濾列表的元件。現在，我們將編寫一個測試來檢查列表是否已正確過濾。請參閱以下程式碼以測試 ListFilterComponent -

ListFilterComponent.js

import React, { useState } from 'react';
import './App.css';

const ListFilterComponent = () => {
   const [filterText, setFilterText] = useState('');
   const items = ['Apple', 'Banana', 'Orange'];   
   const handleFilterChange = (event) => {
      setFilterText(event.target.value);
   };
   
   return (
      <div className='App'>
         <input
            type="text"
            className="filter-input"
            placeholder="Filter list"
            value={filterText}
            onChange={handleFilterChange}
         />
         <ul className="filtered-list">
            {items
            .filter((item) => item.toLowerCase().includes(filterText.toLowerCase()))
            .map((item, index) => (
               <li key={index} className="list-item">
                  {item}
               </li>
            ))}
         </ul>
      </div>
   );
};

export default ListFilterComponent;

ListFilterComponent.test.js

 
import React from 'react';
import { render, scryRenderedDOMComponentsWithClass } from '@testing-library/react';
import ListFilterComponent from './ListFilterComponent';

test('Filter list correctly', () => {
   const { container } = render(<ListFilterComponent />);
   const filterInput = scryRenderedDOMComponentsWithClass(container, 'filter-input')[0];   
   expect(filterInput).toBeDefined();
   
   // Simulate typing in the filter input
   filterInput.value = 'Banana';
   filterInput.dispatchEvent(new Event('input', { bubbles: true }));
   
   // Check if the list is correctly filtered
   const filteredListItems = scryRenderedDOMComponentsWithClass(container, 'list-item');
   expect(filteredListItems.length).toBe(1);
   expect(filteredListItems[0].textContent).toBe('Banana');
});

輸出

解釋 - 該應用程式的功能類似於智慧列表，僅顯示我們選擇的內容。有一個框，我們可以在其中鍵入我們的查詢。接下來是一個專案列表，例如“蘋果”、“香蕉”和“橙子”。當我們在框中鍵入時，列表僅顯示與我們鍵入的內容匹配的內容。它使在列表中查詢專案變得更容易。

對於此應用程式，我們希望檢視我們的列表是否正確地過濾了專案。我們告訴我們的測試程式碼在框中鍵入一些單詞，並檢視列表是否僅顯示匹配的專案。測試程式碼鍵入“香蕉”並檢查列表中是否只有香蕉。如果一切按計劃進行，我們的程式碼會給我們積極的反饋。

總結

scryRenderedDOMComponentsWithClass() 是一個 React 測試函式。它允許測試人員透過其類名查詢和驗證渲染的 React 元件中的專案。此函式就像有一個知道類的測試助手，並且幫助我們在檢查 React 元件是否按預期工作方面。