ReactJS - isDOMComponent()

ReactJS 就像 Web 开发人员的工具箱。它通过将所有内容分解为称为组件的小部分来帮助他们构建网站。每个组件都有自己的时间表，React 提供了开发人员在构建这些部分时可以在不同时间使用的工具。

其中一个内置方法是 isDOMComponent（） 方法。它检查给定的实例是否为 DOM 组件。因此，我们可以说，它有助于我们发现网页的一部分是基本的HTML元素，例如<div>或<span>。

语法

isDOMComponent(instance)

参数

• instance - 这是一个React元素的实例，我们想在其中检查它是否是一个DOM组件。这是我们想要测试的元素。

返回值

isDOMComponent 函数返回 true 或 false 作为布尔值。

• true − 如果实例是 DOM 组件，例如 <div> 或 <span>。
• false − 如果实例不是 DOM 组件或是自定义 React 组件。

例子

示例 - 检查 div 元素

让我们看一个简单的例子来了解 isDOMComponent（） 是如何工作的。因此，我们将创建一个简单的 App 组件，其中我们将有一个函数 checkIfDOMComponent（）。在这个组件内部，我们使用 isDOMComponent（） 来检查 elementToCheck 是否是 DOM 组件。然后，我们将在单击按钮时显示结果。所以让我们看看代码 -

import React from 'react';
import { isDOMComponent } from 'react-dom/test-utils';

const App = () => {
	 	function checkIfDOMComponent() {
	 	 	 const isDOM = isDOMComponent(elementToCheck);
	 	 	 console.log("Is it a DOM component? " + isDOM);
	 	} 		
	 	const elementToCheck = <div>Hello, I am a div element!</div>; 		
	 	return (
	 	 	 <div>
	 	 	 	 	<h1>React App</h1>
	 	 	 	 	<button onClick={checkIfDOMComponent}>Check Component</button>
	 	 	 	 	{elementToCheck}
	 	 	 </div>
	 	);
}

export default App;

输出

示例 - 天气应用程序

此代码表示天气应用 （Weather.js） 的简单 React 组件和使用 @testing-library/react 库的相应测试文件 （Weather.test.js）。Weather 组件是一个函数式 React 组件，它使用 useState 钩子来管理城市和温度的状态。对 getTemperature 函数进行模拟以异步获取温度，为简单起见，它生成随机温度。代码如下 -

Weather.js

import React, { useState } from 'react';

function Weather() {
	 	const [city, setCity] = useState('');
	 	const [temperature, setTemperature] = useState(null); 		
	 	const getTemperature = async () => {
	 	 	 const randomTemperature = Math.floor(Math.random() * 40) + 1; 	 	 	
	 	 	 setTemperature(randomTemperature);
	 	};
	 	
	 	return (
	 	 	 <div>
	 	 	 	 	<h2>Weather App</h2>
	 	 	 	 	<div>
	 	 	 	 	 	 <label htmlFor="cityInput">Enter City:</label>
	 	 	 	 	 	 <input
	 	 	 	 	 	 	 	type="text"
	 	 	 	 	 	 	 	id="cityInput"
	 	 	 	 	 	 	 	value={city}
	 	 	 	 	 	 	 	onChange={(e) => setCity(e.target.value)}
	 	 	 	 	 	 />
	 	 	 	 	 	 <button onClick={getTemperature}>Get Temperature</button>
	 	 	 	 	</div>
	 	 	 	 	{temperature !== null && (
	 	 	 	 	 	 <p>
	 	 	 	 	 	 	 	The temperature in {city} is {temperature}°C.
	 	 	 	 	 	 </p>
	 	 	 	 	)}
	 	 	 </div>
	 	);
}

export default Weather;

Weather.test.js

import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react';
import Weather from './Weather';

test('renders weather component and fetches temperature', async () => {
	 	const { getByText, getByLabelText } = render(<Weather />);
	 	
	 	const cityInput = getByLabelText(/enter city/i);
	 	fireEvent.change(cityInput, { target: { value: 'New York' } });
	 	
	 	const getTemperatureButton = getByText(/get temperature/i);
	 	fireEvent.click(getTemperatureButton);
	 	
	 	await waitFor(() => {
	 	 	 const temperatureElement = getByText(/the temperature in new york/i);
	 	 	 expect(temperatureElement).toBeInTheDocument();
	 	 	 expect(temperatureElement).toBeInstanceOf(HTMLElement); // Using isDOMComponent()
	 	});
});

输出

示例 - 图片库应用程序

此代码包括用于图像库 （ImageGallery.js） 的简单 React 组件和使用 @testing-library/react 库的相应测试文件 （ImageGallery.test.js）。该测试通过确保文档中存在每个图像元素来检查 ImageGallery 组件是否正确呈现。它利用 @testing-library/react 的 render 函数来创建一个用于测试的虚拟 DOM。此应用程序的代码如下 -

ImageGallery.js

import React, { useState } from 'react';

function ImageGallery() {
	 	const [images, setImages] = useState([
	 	 	 'image1.jpg',
	 	 	 'image2.jpg',
	 	 	 'image3.jpg',
	 	]);
	 	
	 	return (
	 	 	 <div>
	 	 	 	 	<h2>Image Gallery</h2>
	 	 	 	 	<div>
	 	 	 	 	 	 {images.map((image, index) => (
	 	 	 	 	 	 	 	<img key={index} src={image} alt={`Image ${index + 1}`} />
	 	 	 	 	 	 ))}
	 	 	 	 	</div>
	 	 	 </div>
	 	);
}

export default ImageGallery;

ImageGallery.test.js

import React from 'react';
import { render } from '@testing-library/react';
import ImageGallery from './ImageGallery';

test('renders image gallery component', () => {
	 	const { getByAltText } = render(<ImageGallery />); 		
	 	for (let i = 1; i <= 3; i++) {
	 	 	 const imageElement = getByAltText(`Image ${i}`);
	 	 	 expect(imageElement).toBeInTheDocument();
	 	 	 expect(imageElement).toBeInstanceOf(HTMLElement); // Using isDOMComponent()
	 	}
});

输出

总结

因此，每当我们调用 isDOMComponent（instance） 时，如果实例是 DOM 组件，它将返回 true，否则返回 false。此函数检查元素是标准 HTML 元素还是自定义的 React 组件。