ReactJS - testRenderer.toJSON() 方法

對於 React 元件，TestRenderer 包非常有用。它可以在不使用網頁或移動裝置設定的情況下顯示元件在 JavaScript 中的呈現方式。

例如，拍攝 React 元件的外觀，就像樹狀結構一樣。這可以在不使用 Web 瀏覽器或 jsdom 的情況下完成。它對於測試專案的視覺效果很有用，而無需使用實際的 Web 環境。

testRenderer.toJSON() 是 React 測試庫中的一個方法，它返回一個物件。此樹僅包含特定於平臺的節點及其屬性，例如 <div> 或 <View>。它沒有使用者編寫的元件。此方法主要用於快照測試，其中捕獲渲染元件的“快照”並將其與先前儲存的快照進行比較，以確保我們的 UI 不會意外更改。

語法

testRenderer.toJSON()

引數

該方法不接受任何引數。我們直接在 TestRenderer 例項上使用它。

返回值

該方法返回一個表示渲染樹的物件。此樹包含特定於平臺的節點，如 <div> 和 <View>，以及相關屬性。但是，它不包含任何使用者編寫的元件。

這是一個簡單的用法示例

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

const MyComponent = () => <div>Hello, World!</div>;
const testRenderer = TestRenderer.create(<MyComponent />);
const tree = testRenderer.toJSON();
console.log(tree);

在此示例中，樹將是一個表示 MyComponent 渲染結構的物件。

示例

示例 - 顯示簡單訊息

此應用程式是一個簡單的 React 元件，它在 <div> 內渲染一條簡單訊息。訊息是“Hello, Simple React App 1!”。這是一個簡單的示例，用於演示 testRenderer.toJSON() 的基本用法。當我們執行此應用程式時，它將記錄一個顯示渲染樹的物件，其中包含一個帶有訊息的 <div> 節點。因此，此應用程式的程式碼如下所示：

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

const App = () => {
   return <div>Hello, Simple React App 1!</div>;
};

export default App;
const testRenderer = TestRenderer.create(<App />);
const tree = testRenderer.toJSON();
console.log(tree);

輸出

示例 - 建立列表應用程式

在此應用程式中，我們將建立一個 React 元件，該元件建立一個列表 (<ul>)，其中包含三個專案 (<li>)。這些專案是“Item 1”、“Item 2”和“Item 3”。列表是使用 map 函式動態生成的。當我們執行此應用程式時，它將記錄一個表示渲染樹的物件，捕獲列表及其專案的結構。

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

const App = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];   
   return (
      <ul>
         {items.map((item, index) => (
            <li key={index}>{item}</li>
         ))}
      </ul>
   );
};

export default App;

const testRenderer = TestRenderer.create(<App />);
const tree = testRenderer.toJSON();

console.log(tree);

輸出

示例 - 互動式按鈕應用程式

此應用程式建立一個具有狀態變數 (count) 和按鈕的 React 元件。狀態最初設定為 0，並在一個段落 (<p>) 元素中顯示。單擊按鈕會遞增計數。此示例顯示了一個使用狀態管理的更互動式的元件。當我們執行此應用程式時，它將記錄一個表示渲染樹的物件，包括段落和按鈕元素的結構。

import React, { useState } from 'react';
import TestRenderer from 'react-test-renderer';
import './App.css';

const App = () => {
   const [count, setCount] = useState(0);   
   return (
      <div className='App'>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
   );
};

export default App;

const testRenderer = TestRenderer.create(<App />);
const tree = testRenderer.toJSON();
console.log(tree);

輸出

總結

testRenderer.toJSON() 是 React 測試庫中的一個方法，它提供渲染元件樹的表示形式。因此，我們已經看到了它的工作原理以及使用它的三個不同的應用程式。這三個應用程式提供了關於如何在不同情況下使用 testRenderer.toJSON() 的簡單示例，從基本渲染到更互動式的元件。控制檯物件表示渲染元件的結構，這對於測試和故障排除很有用。