ReactJS - isDOMComponent()

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

这些内置方法之一是 isDOMComponent() 方法。它检查给定的实例是否是 DOM 组件。因此，我们可以说，它帮助我们发现网页的一部分是基本 HTML 元素，例如 <div> 或 <span>。

语法

isDOMComponent(instance)

参数

instance − 这是我们想要检查它是否是 DOM 组件的 React 元素的实例。它是我们想要测试的元素。

返回值

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;

输出

示例 − 天气应用

此代码表示使用 @testing-library/react 库的天气应用 (Weather.js) 的简单 React 组件和相应的测试文件 (Weather.test.js)。Weather 组件是一个功能性 React 组件，它使用 useState Hooks来管理城市和温度的状态。模拟 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()
   });
});

输出

示例 − 图片库应用

此代码包含一个用于图片库的简单 React 组件 (ImageGallery.js) 和一个使用 @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()
   }
});