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 更新用户界面非常相似的方式执行。因此，我们已经看到了它的工作原理以及如何在不同场景中使用此函数。