ReactJS - scryRenderedDOMComponentsWithTag() 函式

---

---

scryRenderedDOMComponentsWithTag() 函式是 React 程式設計工具，用於查詢和收集有關網頁特定元素的資訊。它只是計算機程式設計師搜尋網站上特定專案的的一種方法。此 scryRenderedDOMComponentsWithTag() 函式搜尋具有特定標籤名稱的專案，例如按鈕、影像或段落。

因此，當我們使用 scryRenderedDOMComponentsWithTag(tree, tagName) 時，我們是在指示系統在“tree”中搜索任何具有給定“tagName”的專案。

假設我們有一個大型的複雜網頁，並且想要查詢其中的所有按鈕。我們可以使用 scryRenderedDOMComponentsWithTag() 來處理所有工作，而不是手動搜尋。

語法

scryRenderedDOMComponentsWithTag(
   tree,
   tagName
)

引數

該函式考慮了兩個重要方面：tree 和 tagName。

• tree − tree 就像網頁的地圖，顯示了所有不同的部分以及它們如何連線。

• tagName − tagName 只是我們感興趣的元素型別的名稱，例如 div 或 p。

返回值

scryRenderedDOMComponentsWithTag() 函式返回渲染樹中所有與指定標籤名稱匹配的 DOM（文件物件模型）元素的列表。

以下是一些使用 scryRenderedDOMComponentsWithTag() 方法的簡單 React 應用，以及每個應用的簡要說明 -

示例

示例 - 按鈕計數器應用

此應用顯示一個按鈕和一個計數。因此，當我們單擊按鈕時，它將遞增計數。為了在 React 中測試 scryRenderedDOMComponentsWithTag()，我們通常會使用 Jest 或 React Testing Library 等測試庫。因此，以下是應用和測試的程式碼 -

ButtonCounter.js

import React, { useState } from 'react';
import './App.css';
const ButtonCounter = () => {
   const [count, setCount] = useState(0);
   
   return (
      <div className='App'>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
   );
};

export default ButtonCounter;

按鈕計數器應用的測試程式碼

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

test('renders ButtonCounter component', () => {
   const { container } = render(<ButtonCounter />);
   const buttons = scryRenderedDOMComponentsWithTag(container, 'button');
   expect(buttons.length).toBe(1);
});

輸出

示例 - 待辦事項列表應用

該應用程式允許我們建立和顯示待辦事項列表。我們可以透過在文字框中輸入待辦事項並單擊“新增待辦事項”按鈕來將新的待辦事項新增到列表中。因此，以下是 React 應用的程式碼，以及我們建立的特定應用的測試 -

TodoList.js

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

const TodoList = () => {
   const [todos, setTodos] = useState([]);
   const [newTodo, setNewTodo] = useState('');
   const addTodo = () => {
      setTodos([...todos, newTodo]);
      setNewTodo('');
   };
   
   return (
      <div className='App'>
         <ul>
            {todos.map((todo, index) => (
               <li key={index}>{todo}</li>
            ))}
         </ul>
         <input
            type="text"
            value={newTodo}
            onChange={(e) => setNewTodo(e.target.value)}
         />
         <button onClick={addTodo}>Add Todo</button>
      </div>
   );
};

export default TodoList;

待辦事項列表應用的測試程式碼

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

test('renders TodoList component', () => {
   const { container } = render(<TodoList />);
   const buttons = scryRenderedDOMComponentsWithTag(container, 'button');
   const input = scryRenderedDOMComponentsWithTag(container, 'input');
   expect(buttons.length).toBe(1);
   expect(input.length).toBe(1);
});

輸出

示例 - 顏色選擇器應用

此應用允許我們從三個選項中選擇顏色：紅色、綠色和藍色。所選顏色顯示在按鈕下方。因此，應用及其測試的程式碼如下所示 -

ColorPicker.js

import React, { useState } from 'react';

const ColorPicker = () => {
   const [selectedColor, setSelectedColor] = useState('');   
   const handleColorChange = (color) => {
      setSelectedColor(color);
   };
   
   return (
      <div>
         <p>Selected Color: {selectedColor}</p>
         <button onClick={() => handleColorChange('Red')}>Red</button>
         <button onClick={() => handleColorChange('Green')}>Green</button>
         <button onClick={() => handleColorChange('Blue')}>Blue</button>
      </div>
   );
};

export default ColorPicker;

顏色選擇器應用的測試程式碼

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

test('renders ColorPicker component', () => {
   const { container } = render(<ColorPicker />);
   const buttons = scryRenderedDOMComponentsWithTag(container, 'button');
   const paragraphs = scryRenderedDOMComponentsWithTag(container, 'p');
   expect(buttons.length).toBe(3);
   expect(paragraphs.length).toBe(1);
});

輸出

上面每個測試用例的描述

• 在上面的測試用例中 -

• 為了渲染每個元件，我們使用 React Testing Library 中的 render 函式。

• 然後使用 scryRenderedDOMComponentsWithTag 來查詢渲染元件中具有某些 HTML 標籤的專案。

• 最後，進行斷言以確認具有給定標籤的元素數量是否符合預期。

• 安裝必要的測試庫（@testing-library/react 和 @testing-library/jest-dom） -

npm install --save-dev @testing-library/react @testing-library/jest-dom

總結

scryRenderedDOMComponentsWithTag() 函式是 React Testing Library 中使用的一種方法，用於在渲染的 React 元件中查詢和檢索 DOM 元素。此函式採用兩個引數：渲染的元件（容器）和我們要搜尋的 HTML 標籤名稱。