ReactJS - testRenderer.root 屬性

"testRenderer.root" 是一個程式設計命令。它就像一把鑰匙，可以開啟並進入測試結構的主層或上層。這把鑰匙允許程式設計師評估和測試應用程式的各種元素或部分。

它就像樹的主幹，引導我們穿過代表應用程式中不同元素的樹枝和樹葉。簡單來說，“testRenderer.root”允許開發者檢查並確保程式碼中的所有內容都正常執行。

語法

testRenderer.root

引數

此方法不接受任何引數。

返回值

此方法將返回主要的“測試例項”或檢查和理解程式碼不同部分的起點。

示例

示例 - 基本元件測試

將包含一個簡單的 React 元件 (MyComponent.js) 和一個對應的測試檔案 (MyComponent.test.js)。這是一個名為 MyComponent 的基本 React 函式元件。它不接受任何 props，只返回一個 JSX 元素，渲染一個帶有文字“Hello, World!”的 <div>。MyComponent.test.js 是 MyComponent 的測試檔案。它使用 react-test-renderer 庫，這是一個用於在測試中渲染元件的 React 包。test 函式用於定義測試用例，檢查 MyComponent 是否正確渲染。

MyComponent.js

import React from 'react';

const MyComponent = () => {
   return <div>Hello, World!</div>;
};

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import TestRenderer from 'react-test-renderer';
import MyComponent from './MyComponent';

test('renders MyComponent correctly', () => {
   const testRenderer = TestRenderer.create(<MyComponent />);
   const root = testRenderer.root;
   
   // Perform assertions using root
   expect(root.findByType('div').props.children).toBe('Hello, World!');
});

輸出

因此，它執行斷言，檢查 MyComponent 內 <div> 元素的文字內容是否為“Hello, World!”。

示例 - 帶 Props 的測試

在這個應用中，程式碼包含一個 React 元件 (Greeting.js) 和一個對應的測試檔案 (Greeting.test.js)。Greeting.js 是一個名為 Greeting 的 React 函式元件。它接受一個 prop name 並使用它動態地在一個 <div> 元素中渲染問候訊息。訊息顯示“Hello, ”後跟 name prop 的值。Greeting.test.js 是 Greeting 元件的測試檔案。它使用 react-test-renderer 庫建立一個測試渲染器並渲染 Greeting 元件，並將 prop name 設定為“Ankit”。

Greeting.js

import React from 'react';

const Greeting = ({ name }) => {
return <div>Hello, {name}!</div>;
};

export default Greeting;

Greeting.test.js

import React from 'react';
import TestRenderer from 'react-test-renderer';
import Greeting from './Greeting';

test('renders Greeting correctly with props', () => {
   const testRenderer = TestRenderer.create(<Greeting name="Ankit" />);
   const root = testRenderer.root;
   
   // Perform assertions using root
   expect(root.findByType('div').props.children).toBe('Hello, Ankit!');
});

輸出

示例

在這個應用中，我們將擁有一個 React 元件 (Counter.js) 和一個對應的測試檔案 (Counter.test.js)。Counter.js 檔案是一個 React 函式元件。它使用 useState hook 維護一個狀態變數 count，初始化為 0。元件渲染一個 <div>，其中包含一個顯示當前計數的 <p> 元素和一個 <button>，單擊該按鈕時，將呼叫 increment 函式並更新計數。Counter.test.js 檔案是 Counter 元件的測試檔案。建立測試用例以檢查單擊按鈕時計數是否正確遞增。

Counter.js

import React, { useState } from 'react';

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

export default Counter;

Counter.test.js

import React from 'react';
import TestRenderer from 'react-test-renderer';
import Counter from './Counter';

test('increments count when the button is clicked', () => {
   const testRenderer = TestRenderer.create(<Counter />);
   const root = testRenderer.root;
   
   // Check initial count
   expect(root.findByType('p').props.children).toBe('Count: 0');
   
   // Simulate button click
   root.findByType('button').props.onClick();
   
   // Check if count is incremented
   expect(root.findByType('p').props.children).toBe('Count: 1');
});

輸出

總結

testRenderer.root 是用於測試 React 元件的方法。當使用 react-test-renderer 等測試庫時，此方法提供對渲染的元件樹的根或頂級例項的訪問。它允許測試人員對元件的不同部分進行斷言和執行測試。因此，我們已經看到了此方法的用法，並建立了三個不同的應用程式來實際理解此概念。

reactjs_reference_api.htm

列印頁面