ReactJS - scryRenderedComponentsWithType() 函式

---

---

React 測試庫中的 scryRenderedComponentsWithType() 函式是用於測試 React 元件的有用工具。此函式搜尋我們渲染的元件樹中給定型別元件的每個例項。

將我們的 React 專案視為一棵樹，其多個元件是樹枝。scryRenderedComponentsWithType() 函式充當搜尋引擎，使我們能夠在該樹中查詢特定型別元件的所有例項。

換句話說，我們可以說 React 測試庫中的 scryRenderedComponentsWithType() 函式可用於根據型別查詢元件的例項。

語法

scryRenderedComponentsWithType(tree, componentClass)

引數

• tree − 這是完整的 React 元件層次結構。我們可以將其視為整片森林。

• componentClass − 這是我們要查詢的元件型別，就像森林中的一棵特定樹一樣。

返回值

scryRenderedComponentsWithType(tree, componentClass) 掃描樹並返回給定元件型別的所有例項。

示例

示例 - 待辦事項列表應用和測試

因此，首先我們將建立一個簡單的待辦事項列表應用，使用者可以在其中新增、刪除和將任務標記為已完成。然後，我們將建立一個帶有測試庫（如 Jest 或 React 測試庫）的測試檔案。為了在測試檔案中查詢特定型別的元件，我們將使用 scryRenderedComponentsWithType()。因此，以下是待辦事項列表應用及其測試程式碼的程式碼 -

ToDoListApp.js

import React, { useState } from 'react';

const ToDoListApp = () => {
   const [tasks, setTasks] = useState([]);
   const [newTask, setNewTask] = useState('');
   
   const addTask = () => {
      if (newTask.trim() !== '') {
         setTasks([...tasks, newTask]);
         setNewTask('');
      }
   };
   
   const removeTask = (index) => {
      const updatedTasks = [...tasks];
      updatedTasks.splice(index, 1);
      setTasks(updatedTasks);
   };
   
   return (
      <div>
         <h2>To-Do List</h2>
         <input
            type="text"
            value={newTask}
            onChange={(e) => setNewTask(e.target.value)}
         />
      <button onClick={addTask}>Add Task</button>
      <ul>
         {tasks.map((task, index) => (
            <li key={index}>
               {task}
               <button onClick={() => removeTask(index)}>Remove</button>
            </li>
         ))}
      </ul>
      </div>
   );
};

export default ToDoListApp;

ToDoListApp.test.js

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

test('renders the To-Do List App', () => {
   // Render the component
   const { container } = render(<ToDoListApp />);
   
   // find instances of buttons
   const buttons = scryRenderedComponentsWithType(container, 'button');
   
   expect(buttons.length).toBeGreaterThan(0);
});

輸出

示例 - 隨機報價生成器應用

現在我們將建立一個隨機報價生成器應用。該應用允許使用者生成任意次數的新報價，以獲得可重複且有趣的體驗。並且我們還將使用 scryRenderedComponentsWithType() 方法編寫測試程式碼來測試我們新建立的應用。因此，此應用的程式碼如下 -

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

const RandomQuoteGeneratorApp = () => {
   const quotes = [
      "Opportunities don't happen, you create them.",
      "Love your family, work super hard, live your passion.",
      "Life is what happens when you are busy making other plans."
   ];
   
   const [randomQuote, setRandomQuote] = useState('');   
   const generateRandomQuote = () => {
      const randomIndex = Math.floor(Math.random() * quotes.length);
      setRandomQuote(quotes[randomIndex]);
   };   
   return (
      <div className='App'>
         <h2>Random Quote Generator</h2>
         <button onClick={generateRandomQuote}>Generate Quote</button>
         {randomQuote && <p>"{randomQuote}"</p>}
      </div>
   );
};

export default RandomQuoteGeneratorApp;

RandomQuoteGeneratorApp.test.js

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

test('renders the Random Quote Generator App', () => {
   // Render the component
   const { container } = render(<RandomQuoteGeneratorApp />);
   
   // find instances of button elements
   const buttonElements = scryRenderedComponentsWithType(container, 'button');
   
   expect(buttonElements.length).toBeGreaterThan(0);
});

輸出

示例 - 計數器應用和測試

這次我們將建立一個計數器應用，這是一個簡單的應用，允許使用者與計數器互動。使用者可以增加、減少和將計數器重置為零。此應用是一個基本示例，向我們介紹了 React 狀態管理。因此，我們將使用 scryRenderedComponentsWithType() 方法為該應用建立測試程式碼。應用和測試的程式碼如下 -

CounterApp.js

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

const CounterApp = () => {
   const [counter, setCounter] = useState(0);
   const increment = () => {
      setCounter(counter + 1);
   };   
   const decrement = () => {
      setCounter(counter - 1);
   };   
   const reset = () => {
      setCounter(0);
   };
   
   return (
      <div className='App'>
         <h2>Counter App</h2>
         <p>Counter Value: {counter}</p>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
         <button onClick={reset}>Reset</button>
      </div>
   );
};

export default CounterApp;

CounterApp.test.js

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

test('renders the Counter App', () => {
   // Render the component
   const { container } = render(<CounterApp />);
   
   // find instances of button elements
   const buttonElements = scryRenderedComponentsWithType(container, 'button');
   
   expect(buttonElements.length).toBeGreaterThanOrEqual(3);
});

輸出

請記住，這些只是如何在測試場景中使用 scryRenderedComponentsWithType() 的簡單示例。在現實生活中，我們將擁有更完整的測試，涵蓋我們元件功能的許多方面。

安裝並配置必要的測試庫（如 Jest 和 React 測試庫）以及測試環境。

總結

如果我們有一個由多個元件（如按鈕、表單和標題）組成的 React 應用，我們可以使用 scryRenderedComponentsWithType() 函式查詢所有例項。瞭解和使用 scryRenderedComponentsWithType() 在我們的測試過程中非常有用。它確保我們的元件正確渲染並使測試更有效率。