ReactJS - testRenderer.getInstance() 方法

本教程中我們將討論的概念稱為 testRenderer.getInstance()。

testRenderer.getInstance() 充當開發人員的除錯工具。假設我們正在建立一個網站或應用程式，並且想要了解更多關於我們建立的關鍵元件——根元素的資訊。此工具將幫助我們完成此任務。

簡單來說，testRenderer.getInstance() 函式是一個幫助開發人員理解和檢查他們正在建立的內容的主要元件的工具，但在處理由函式元件形成的物件時，它存在限制。

語法

testRenderer.getInstance()

引數

此方法不需要任何引數。當我們使用此方法時，不需要向其提供任何特殊指令或資訊。

返回值

testRenderer.getInstance() 方法返回根元素的例項。簡單來說，它提供了對開發人員正在建立的關鍵元素的深入瞭解或快照。

示例

示例

在此示例中，我們將有一個簡單的應用程式，顯示字元列表。要獲取有關根元素（即 CharacterList 元件）的資訊，我們將使用 testRenderer.getInstance()。出於說明目的，我們將使用簡化的渲染函式。

import React from 'react';
import ReactDOM from 'react-dom';

// React component
function CharacterList({ characters }) {
   return (
      <div>
         <h1>List of Characters</h1>
         <ul>
            {characters && characters.map((character, index) => (
               <li key={index}>{character}</li>
            ))}
         </ul>
      </div>
   );
}
export default CharacterList;
// Function to render a React component
function render(element) {
   const container = document.createElement('div');
   ReactDOM.render(element, container);
   
   return {
      getInstance: () => container.firstChild,
   };
}

// list of characters
const characters = ['Ankit', 'Babita', 'Chetan'];

// Render the characters using React
const testRenderer = render(<CharacterList characters={characters} />);

// Use testRenderer.getInstance() to get details
const characterListInstance = testRenderer.getInstance();

// Display information about the root element
console.log(`Details about CharacterList: `, characterListInstance);

輸出

因此，在執行應用程式後，我們可以在控制檯中看到字元列表，並在列表中看到三個元素。

示例 - 計數器應用

在此應用程式中，Counter 元件呈現帶有遞增和遞減按鈕的計數器。我們將使用 testRenderer.getInstance() 與渲染的元件進行互動，模擬點選“遞增”按鈕。因此，此應用程式的程式碼如下所示：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

// Counter component
function Counter() {
   const [count, setCount] = useState(0);
   
   const increment = () => {
      setCount(count + 1);
   };
   
   const decrement = () => {
      setCount(count - 1);
   };
   
   return (
      <div>
         <h1>Counter App</h1>
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
      </div>
   );
}

export default Counter;
// Function to render a React component
function render(element) {
   const container = document.createElement('div');
   ReactDOM.render(element, container);
   
   return {
      getInstance: () => container.firstChild,
   };
}

// Render the Counter component using React
const testRenderer = render(<Counter />);

// interacting with the counter
testRenderer.getInstance().querySelector('button').click();

// Use testRenderer.getInstance()
const counterInstance = testRenderer.getInstance();

// Display information about the root element
console.log(`Details about Counter: `, counterInstance);

輸出

總結

因此，testRenderer.getInstance() 是一個開發人員工具，允許他們更詳細地探索其專案的主要元件。它的功能類似於放大鏡，儘管它無法從函式元件中收集字元。瞭解此概念有助於開發人員建立更有效率的網站和應用程式。