ReactJS - TestRenderer.create() 方法

---

---

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

例如，拍攝 React 元件的外觀，就像一個樹狀結構。此包在不使用 Web 瀏覽器或 jsdom 的情況下執行此操作。它有助於檢查事物的外觀，而無需使用實際的 Web 環境。

TestRenderer.create() 函式是 React 方法，旨在簡化測試。它允許我們建立特定型別的例項來測試 React 元件的行為，而無需依賴實際的 Web 瀏覽器。因此，基本上此函式充當介面，為我們建立 TestRenderer 物件。

語法

TestRenderer.create(element, options);

引數

element − 這是要測試的 React 元件。我們提供我們感興趣的元件，TestRenderer 會向我們展示它的行為。

options − 這些是我們可以提供的其他設定，用於修改測試的執行方式。

返回值

使用 TestRenderer.create() 後，它會返回一個 TestRenderer 物件。此例項是我們用來檢查一切正常執行的工具。

示例

示例 - Hello World 應用及其測試

首先，我們將建立一個簡單的 Hello World 應用及其相應的測試檔案，以使用 TestRenderer.create() 方法建立這些元件的例項並將結果結構記錄到控制檯。此方法的程式碼如下所示：

HelloWorldApp.js

import React from 'react';

function HelloWorldApp() {
   return <div className='App'>Hello, World!</div>;
}

export default HelloWorldApp;

TestHelloWorldApp.js

import TestRenderer from 'react-test-renderer';
import HelloWorldApp from './HelloWorldApp';

// Create a TestRenderer instance
const testInstance = TestRenderer.create(<HelloWorldApp />);

// Log the result 
console.log(testInstance.toJSON());

輸出

在上面的輸出影像中，我們可以看到螢幕上列印了 Hello World！。TestHelloWorldApp 檔案是 HelloWorldApp 的測試檔案。它使用 react-test-renderer 包中的 TestRenderer 建立 HelloWorldApp 元件的例項。

示例 - 計數器應用及其測試

現在，我們將建立一個簡單的 React 元件 CounterApp，它顯示一個計數器和一個遞增按鈕。我們還有一個測試檔案 TestCounterApp.js，它使用 TestRenderer 建立 CounterApp 例項並將結果結構記錄到控制檯。

CounterApp.js

import React, { useState } from 'react';

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

export default CounterApp;

TestCounterApp.js

import TestRenderer from 'react-test-renderer';
import CounterApp from './CounterApp';

// Create a TestRenderer instance
const testInstance = TestRenderer.create(<CounterApp />);

// Log the result
console.log(testInstance.toJSON());

輸出

TestCounterApp 檔案是 CounterApp 的測試檔案。它使用 react-test-renderer 包中的 TestRenderer 建立 CounterApp 元件的例項。然後，元件樹使用 toJSON() 方法轉換為類似 JSON 的結構，並將結果記錄到控制檯。

示例 - 待辦事項列表應用及其測試

現在，我們將建立一個 TodoListApp。它將包含一個 React 元件，提供一個簡單的待辦事項列表。我們還將有一個測試檔案 TestTodoListApp.js，它將使用 TestRenderer 生成 TodoListApp 例項並將結果結構記錄到控制檯。此應用程式的程式碼如下所示：

TodoListApp.js

import React, { useState } from 'react';
import './App.css';

function TodoListApp() {
   const [todos, setTodos] = useState([]);
   const [newTodo, setNewTodo] = useState('');
   
   const addTodo = () => {
      setTodos([...todos, newTodo]);
      setNewTodo('');
   };   
   return (
      <div className='App'>
         <h2>Todo List</h2>
         <ul>
            {todos.map((todo, index) => (
               <li key={index}>{todo}</li>
            ))}
         </ul>
         <input
            type="text"
            value={newTodo}
            onChange={(e) => setNewTodo(e.target.value)}
         />
            <button onClick={addTodo}>Add Todo</button>
      </div>
   );
}

export default TodoListApp;

TestTodoListApp.js

import TestRenderer from 'react-test-renderer';
import TodoListApp from './TodoListApp';

// Create a TestRenderer instance
const testInstance = TestRenderer.create(<TodoListApp />);

// Log the result
console.log(testInstance.toJSON());

輸出

TestTodoListApp 檔案是 TodoListApp 的測試檔案。它使用 react-test-renderer 包中的 TestRenderer 建立 TodoListApp 元件的例項。

總結

因此，TestRenderer.create() 是一個有用的工具，可以為我們的 React 元件建立一個神奇的映象，以便我們可以看到它的外觀，而無需真正的網頁。為了瞭解此方法的用法，我們建立了不同的應用程式以更好地理解。