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 组件是否按预期工作方面。