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 组件创建一个神奇的镜像，以便我们可以看到它的外观，而无需真正的网页。为了了解此方法的用法，我们创建了不同的应用程序以更好地理解。