ReactJS - TestRenderer.act() 方法

---

---

React 測試對於確保我們的元件按預期執行非常重要。因此，我們將研究 TestRenderer.act() 函式，這是一個使測試更容易的有用工具。

TestRenderer.act() 是 'react-test-renderer' 庫中提供的函式。此方法允許我們準備 React 元件以進行斷言。它類似於 'react-dom/test-utils' 中的 act() 輔助函式，它使測試 TestRenderer 元件變得容易。

語法

TestRenderer.act(callback);

首先，我們將需要匯入必要的函式：

import { create, act } from 'react-test-renderer';

讓我們考慮一個例子，其中我們有一個名為 App 的元件，它接收一個名為 value 的 prop：

import App from './app.js';

// render the component
let root;
act(() => {
   root = create(<App value={1} />);
});

// make assertions on root
expect(root.toJSON()).toMatchSnapshot();

在此程式碼中，我們使用值為 1 的 prop 建立了 App 元件的例項。act() 方法包裝了此建立過程，以確保元件已準備好進行測試。

現在，我們將使用不同的 props 更新元件：

// update with some different props
act(() => {
   root.update(<App value={2} />);
});
// make assertions on root
expect(root.toJSON()).toMatchSnapshot();

再次使用 act()，我們可以安全地使用新的 props 更新元件並在更新後的元件上進行斷言。

示例

讓我們透過使用 TestRenderer.act(callback) 函式建立小型 React 應用來使用此資訊。我們將展示此函式如何在許多測試場景中很有用。

示例 - 基本元件

在這個第一個應用中，我們將檢查一個簡單的東西 - 我們稱之為“BasicComponent”的 React 程式的基本部分。它就像我們專案的一小部分。這部分不需要任何額外資訊。我們想看看當我們在螢幕上顯示它時它是否看起來正確。我們檢查的方式是建立它並確保它看起來完全符合我們的預期。

BasicComponent.js

import React from 'react';

const BasicComponent = () => {
   return (
      <div>
         <h1>Hello, I'm a Basic Component!</h1>
         <p>This is a simple React component for testing.</p>
      </div>
   );
};

export default BasicComponent;

App.js

import { create, act } from 'react-test-renderer';
// Import the component
import BasicComponent from './BasicComponent.js';

let root;
act(() => {
   root = create(<BasicComponent />);
});

expect(root.toJSON()).toMatchSnapshot();

輸出

在這個例子中，BasicComponent 是一個基本的 React 函式式元件，它建立一個包含 h1 標題和 p 段落的 div。此元件用於測試，其輸出將與我們測試程式碼中的快照進行比較。

示例 - 帶有 Props 的元件

第二個應用程式用於測試名為 ComponentWithProps 的 React 元件，該元件接收一個名為 name 的 prop，其值為“John”。此示例演示如何使用 TestRenderer.act() 建立具有特定特性的元件例項，並確認呈現的結果與所需的快照匹配。

ComponentWithProps.js

import React from 'react';
const ComponentWithProps = (props) => {
   return (
      <div>
         <h1>Hello, {props.name}!</h1>
         <p>This component receives a prop named "name" and displays a greeting.</p>
      </div>
   );
};

export default ComponentWithProps;

App.js

import { create, act } from 'react-test-renderer';
// Import the component
import ComponentWithProps from './ComponentWithProps.js';

let root;
act(() => {
   root = create(<ComponentWithProps name="John" />);
});

expect(root.toJSON()).toMatchSnapshot();

輸出

在上面的程式碼中，ComponentWithProps 是另一個簡單的函式式元件，它接收一個名為 name 的 prop。此 prop 用於建立一個顯示在 h1 標題中的問候語。該段落還對元件進行了簡要說明。

示例 - 動態元件

在這個程式中，我們將演示如何測試名為 DynamicComponent 的動態 React 元件。此元件的生命週期將包括狀態更新或 prop 更改等更改。測試使用設定元件並透過更新它來重新建立動態更改。這展示了 TestRenderer.act() 如何處理動態元件行為。

DynamicComponent.js

import React, { useState, useEffect } from 'react';

const DynamicComponent = () => {
   const [count, setCount] = useState(0);
   
   useEffect(() => {
      // Dynamic changes after component mount
      const interval = setInterval(() => {
         setCount((prevCount) => prevCount + 1);
      }, 1000);
      
      // Clean up interval on component unmount
      return () => clearInterval(interval);
   }, []); 
   
   return (
      <div>
         <h1>Dynamic Component</h1>
         <p>This component changes dynamically. Count: {count}</p>
      </div>
   );
};

export default DynamicComponent;

App.js

import { create, act } from 'react-test-renderer';
// Import the component
import DynamicComponent from './DynamicComponent.js';

let root;
act(() => {
   root = create(<DynamicComponent />);
});

// dynamic changes
act(() => {
   root.update(<DynamicComponent />);
});

expect(root.toJSON()).toMatchSnapshot();

輸出

在這個例子中，DynamicComponent 是一個使用 useState 和 useEffect hook 的函式式元件。它使用 setInterval 啟動一個計時器，在初始化計數狀態後每秒遞增計數一次。這代表了元件隨時間推移的動態變化。

此外，上述示例展示瞭如何使用 TestRenderer.act() 測試各種型別的 React 元件。透過遵循這些模式，我們可以簡化測試過程並確保 React 應用程式的可靠性。

注意

在使用 react-test-renderer 時，使用 TestRenderer.act() 非常重要，以確保與 React 內部行為的相容性，並獲得正確且可靠的測試結果。

總結

TestRenderer.act() 是 react-test-renderer 庫中提供的函式。其主要目的是幫助測試 React 元件。它確保我們的測試以與 React 更新使用者介面非常相似的方式執行。因此，我們已經看到了它的工作原理以及如何在不同場景中使用此函式。