ReactJS - testRenderer.toTree() 方法

testRenderer.toTree() 是一個測試函式，它記錄並表示渲染結構的詳細影像，類似於在測試場景中拍攝快照。此函式比其他方法（如 toJSON()）提供更多資訊，並且包含使用者編寫的元件。通常，在建立我們自己的測試工具時，或者當我們想要在程式設計測試期間獲得建立項的非常具體的檢視時，我們會使用它。

這在測試計算機程式中的內容時非常有用，尤其是在我們想要檢查其他人建立的部分時。這類似於檢視詳細地圖以瞭解應用程式的所有不同部分。因此，testRenderer.toTree() 允許我們以詳細的方式檢視測試中正在發生的事情。

語法

testRenderer.toTree()

引數

testRenderer.toTree() 不需要任何引數。這就像拍攝測試中正在發生的事情的照片，它不需要任何額外資訊來做到這一點。

返回值

testRenderer.toTree() 函式返回一個顯示渲染樹的物件。

示例

示例 - 基本元件

首先，我們將建立一個簡單的應用程式，在其中我們將使用 testRenderer.toTree() 函式。這個應用程式就像在 React 中拍攝一條簡單訊息的圖片。訊息顯示為“Hello, React！”，它在一個框內。testRenderer.toTree() 函式幫助我們檢視此訊息和框是如何組合在一起的。

import React from 'react';
import TestRenderer from 'react-test-renderer';

// Simple functional component
const MyComponent = () => <div><h1>Hello, React! </h1></div>;
export default MyComponent;

// Creating a test renderer
const testRenderer = TestRenderer.create(<MyComponent />);

// Using testRenderer.toTree()
const tree = testRenderer.toTree();

console.log(tree);

輸出

示例 - 屬性和狀態

在第二個應用程式中，我們將建立一個計數器應用程式。假設計數器就像記分牌上的數字。這個應用程式就像在 React 中拍攝該計數器的快照。我們可以透過單擊按鈕來增加計數。testRenderer.toTree() 函式向我們展示了這個計數器和按鈕是如何設定的。

import React, { useState } from 'react';
import TestRenderer from 'react-test-renderer';

// Component with props and state
const Counter = ({ initialCount }) => {
   const [count, setCount] = useState(initialCount);
   
   return (
      <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
   );
};

export default Counter;
// Creating a test renderer with props
const testRenderer = TestRenderer.create(<Counter initialCount={5} />);

// Using testRenderer.toTree()
const tree = testRenderer.toTree();

console.log(tree);

輸出

示例 - 帶有子元件的元件

最後，我們將建立一個包含子元件的元件。這就像在 React 中拍攝一張全家福。有一個父元件，其中將顯示訊息“Parent Component”，還有一個子元件，其中顯示訊息“I'm a child”。testRenderer.toTree() 函式讓我們看到這些父元件和子元件是如何排列的。

import React from 'react';
import TestRenderer from 'react-test-renderer';

// Component with children
const ParentComponent = ({ children }) => (
   <div>
      <h2>Parent Component</h2>
      {children}
   </div>
);

export default ParentComponent;

// Child component
const ChildComponent = () => <p>I'm a child!</p>;

// test renderer with nested components
const testRenderer = TestRenderer.create(
   <ParentComponent>
      <ChildComponent />
   </ParentComponent>
);

// Using testRenderer.toTree()
const tree = testRenderer.toTree();

console.log(tree);

輸出

呼叫 testRenderer.toTree() 時，這三個應用程式的輸出看起來都像是生成的樹的詳細表示。輸出將是一個包含元件資訊、它們的 props 以及虛擬 DOM 結構的物件。

總結

在本教程中，我們學習了 testRenderer.toTree() 方法。我們探索了三個簡單的 React 應用程式，並使用 testRenderer.toTree() 函式拍攝了它們渲染方式的詳細快照。每個應用程式都代表不同的場景。它幫助我們理解元件的結構以及它們如何相互互動。