ReactJS - scryRenderedDOMComponentsWithClass()

众所周知，React 是一个非常流行的库，用于创建响应式和交互式 Web 应用程序。React 库中有一个名为 scryRenderedDOMComponentsWithClass() 的函数。此函数定位渲染树中组件的所有 DOM 元素。它会查找类名与我们指定的类名匹配的 DOM 组件。

假设我们有一棵树，类似于家谱，但用于我们的网站。每个分支都代表我们网站的一个独立部分。现在，scryRenderedDOMComponentsWithClass() 遍历每个分支并选择具有特定类的元素。

语法

scryRenderedDOMComponentsWithClass(
   tree,
   className
)

参数

括号内有两个内容:tree 和 className。

tree − tree 这个词指的是我们的家谱。
className − className 类似于指示函数"查找具有此特定名称或类的事物"。

返回值

此函数返回显示的树的组件中与给定类名匹配的所有 DOM 元素的列表。

scryRenderedDOMComponentsWithClass() 函数通常用于测试 React 组件。它是 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();
   
   // 检查计数是否已更新
   const counterDisplay = scryRenderedDOMComponentsWithClass(container, 'counter-display')[0];
   expect(counterDisplay.textContent).toBe('Count: 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();
   
   // 模拟点击按钮
   toggleButton.click();
   
   // 检查内容现在是否被隐藏
   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();
   
   // 模拟在过滤器输入中输入
   filterInput.value = 'Banana';
   filterInput.dispatchEvent(new Event('input', { bubbles: true }));
   
   // 检查列表是否正确过滤
   const filteredListItems = scryRenderedDOMComponentsWithClass(container, 'list-item');
   expect(filteredListItems.length).toBe(1);
   expect(filteredListItems[0].textContent).toBe('Banana');
});