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() 在我们的测试过程中非常有用。它确保我们的组件正确渲染并使测试更有效率。