ReactJS - scryRenderedDOMComponentsWithTag（）

scryRenderedDOMComponentsWithTag（） 函数是一个 React 编程工具，用于查找和收集有关网页特定元素的信息。它只是计算机程序员在网站上搜索特定项目的一种方法。此 scryRenderedDOMComponentsWithTag（） 函数搜索具有特定标签名称的项目，例如按钮、图像或段落。

因此，当我们使用 scryRenderedDOMComponentsWithTag（tree， tagName） 时，我们指示系统在“树”中搜索具有给定“tagName”的任何项目。

假设我们有一个庞大而复杂的网页，并希望找到其上的所有按钮。我们可以使用 scryRenderedDOMComponentsWithTag（） 来为我们处理所有工作，而不是手动搜索。

语法

scryRenderedDOMComponentsWithTag(
	 	tree,
	 	tagName
)

参数

该函数考虑了两个重要因素：tree 和 tagName。

• tree - 树就像网页的地图，显示所有不同的部分以及它们如何连接。
• tagName − tagName 只是我们感兴趣的元素类型的名称，如 div 或 p。

返回值

scryRenderedDOMComponentsWithTag（） 函数返回呈现树中与指定标签名称匹配的所有 DOM（文档对象模型）元素的列表。

以下是一些使用 scryRenderedDOMComponentsWithTag（） 方法的简单 React 应用程序，以及每个应用程序的简要说明 -

例子

示例 - 按钮计数器应用程序

此应用程序显示一个按钮和一个计数。因此，当我们单击该按钮时，它将增加计数。为了在 React 中测试 scryRenderedDOMComponentsWithTag（），我们通常会使用像 Jest 或 React 测试库这样的测试库。因此，以下是应用程序和测试的代码 -

ButtonCounter.js

import React, { useState } from 'react';
import './App.css';
const ButtonCounter = () => {
	 	const [count, setCount] = useState(0);
	 	
	 	return (
	 	 	 <div className='App'>
	 	 	 	 	<p>Count: {count}</p>
	 	 	 	 	<button onClick={() => setCount(count + 1)}>Increment</button>
	 	 	 </div>
	 	);
};

export default ButtonCounter;

按钮计数器应用的测试代码

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

test('renders ButtonCounter component', () => {
	 	const { container } = render(<ButtonCounter />);
	 	const buttons = scryRenderedDOMComponentsWithTag(container, 'button');
	 	expect(buttons.length).toBe(1);
});

输出

示例 - 待办事项列表应用程序

该应用程序允许我们创建和显示待办事项列表。我们可以通过在文本框中输入它并单击“添加待办事项”按钮来向列表添加新的待办事项。因此，以下是 React App 的代码，以及我们创建的特定应用程序的测试 -

TodoList.js

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

const TodoList = () => {
	 	const [todos, setTodos] = useState([]);
	 	const [newTodo, setNewTodo] = useState('');
	 	const addTodo = () => {
	 	 	 setTodos([...todos, newTodo]);
	 	 	 setNewTodo('');
	 	};
	 	
	 	return (
	 	 	 <div className='App'>
	 	 	 	 	<ul>
	 	 	 	 	 	 {todos.map((todo, index) => (
	 	 	 	 	 	 	 	<li key={index}>{todo}</li>
	 	 	 	 	 	 ))}
	 	 	 	 	</ul>
	 	 	 	 	<input
	 	 	 	 	 	 type="text"
	 	 	 	 	 	 value={newTodo}
	 	 	 	 	 	 onChange={(e) => setNewTodo(e.target.value)}
	 	 	 	 	/>
	 	 	 	 	<button onClick={addTodo}>Add Todo</button>
	 	 	 </div>
	 	);
};

export default TodoList;

待办事项列表应用的测试代码

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

test('renders TodoList component', () => {
	 	const { container } = render(<TodoList />);
	 	const buttons = scryRenderedDOMComponentsWithTag(container, 'button');
	 	const input = scryRenderedDOMComponentsWithTag(container, 'input');
	 	expect(buttons.length).toBe(1);
	 	expect(input.length).toBe(1);
});

输出

示例 - 颜色选择器应用程序

这个应用程序允许我们从三个选项中选择一种颜色：红色、绿色和蓝色。所选颜色显示在按钮下方。因此，应用程序及其测试的代码如下 -

ColorPicker.js

import React, { useState } from 'react';

const ColorPicker = () => {
	 	const [selectedColor, setSelectedColor] = useState(''); 		
	 	const handleColorChange = (color) => {
	 	 	 setSelectedColor(color);
	 	};
	 	
	 	return (
	 	 	 <div>
	 	 	 	 	<p>Selected Color: {selectedColor}</p>
	 	 	 	 	<button onClick={() => handleColorChange('Red')}>Red</button>
	 	 	 	 	<button onClick={() => handleColorChange('Green')}>Green</button>
	 	 	 	 	<button onClick={() => handleColorChange('Blue')}>Blue</button>
	 	 	 </div>
	 	);
};

export default ColorPicker;

颜色选取器应用的测试代码

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

test('renders ColorPicker component', () => {
	 	const { container } = render(<ColorPicker />);
	 	const buttons = scryRenderedDOMComponentsWithTag(container, 'button');
	 	const paragraphs = scryRenderedDOMComponentsWithTag(container, 'p');
	 	expect(buttons.length).toBe(3);
	 	expect(paragraphs.length).toBe(1);
});

输出

上述每个测试用例的说明

在上述测试用例中 -

• 为了渲染每个组件，我们使用 React 测试库中的 render 函数。
• 然后，使用 scryRenderedDOMComponentsWithTag 在呈现的组件中查找具有特定 HTML 标记的项目。
• 最后，进行断言以确认具有给定标签的元素数量符合预期。
• 安装必要的测试库（@testing-library/react 和 @testing-library/jest-dom） -

总结

scryRenderedDOMComponentsWithTag（） 函数是 React 测试库中使用的一种方法，用于在渲染的 React 组件中查找和检索 DOM 元素。这个函数有两个参数：渲染的组件（容器）和我们想要搜索的 HTML 标签名称。