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;

輸出

示例 - 天氣應用

此程式碼表示一個簡單的 React 天氣應用元件 (Weather.js) 和一個使用 @testing-library/react 庫的相應測試檔案 (Weather.test.js)。Weather 元件是一個函式式 React 元件，它使用 useState hook 來管理城市和溫度的狀態。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()
   }
});

輸出

總結

因此，每當我們呼叫 isDOMComponent(instance) 時，如果例項是 DOM 元件，它將返回 true，否則返回 false。此函式檢查元素是標準 HTML 元素還是自定義的 React 元件。