ReactJS - TestRenderer.create() 方法

更新于 2025/3/24 13:52:17

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 App 及其测试

因此，首先我们将创建一个简单的 Hello World App 及其相应的测试文件，以使用 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';

// 创建 TestRenderer 实例
const testInstance = TestRenderer.create(<HelloWorldApp />);

// 记录结果
console.log(testInstance.toJSON());

输出

因此，我们可以在上面的输出图像中看到屏幕上打印了 Hello World!。TestHelloWorldApp 文件是一个 HelloWorldApp 测试文件。要创建 HelloWorldApp 组件的实例，它利用了 react-test-renderer 包中的 TestRenderer。

示例 − 计数器应用及其测试

现在我们将创建一个简单的 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';

// 创建 TestRenderer 实例
const testInstance = TestRenderer.create(<CounterApp />);

// 记录结果
console.log(testInstance.toJSON());

输出

TestCounterApp 文件是 CounterApp 测试文件。要创建 CounterApp 组件的实例，它使用来自 react-test-renderer 包的 TestRenderer。然后使用 toJSON() 方法将组件树转换为类似 JSON 的结构，并将结果记录到控制台。

示例 − Todolist 应用及其测试

现在我们将创建一个 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';

// 创建 TestRenderer 实例
const testInstance = TestRenderer.create(<TodoListApp />);

// 记录结果
console.log(testInstance.toJSON());