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();
	 	
	 	// 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');
});

输出

解释 - 该应用程序的功能类似于智能列表，仅显示我们选择的内容。有一个框，我们可以在其中输入查询。接下来是“苹果”、“香蕉”和“橙子”等项目的列表。当我们在框中输入时，列表仅显示与我们键入的内容匹配的内容。它使在列表中查找项目变得更加简单。

对于这个应用程序，我们想看看我们的列表是否正确过滤了项目。我们告诉测试代码在框中输入一些单词，看看列表是否只显示匹配的项目。测试代码输入“Banana”，并检查列表中是否只有香蕉。如果一切按计划进行，我们的代码会给我们积极的反馈。

总结

scryRenderedDOMComponentsWithClass（） 是一个 React 测试函数。它允许测试人员通过类名来定位和验证渲染的 React 组件中的项目。这个功能就像有一个测试助手，他知道类并帮助我们检查我们的 React 组件是否运行正确。