ReactJS - TestRenderer.create() 方法

TestRenderer 包对于 React 组件非常有用。它可以显示组件在 JavaScript 中的显示方式，而无需网页或移动设置。

例如，拍摄 React 组件的外观，例如 tree 结构。此包在不使用 Web 浏览器或 jsdom 的情况下执行此操作。它有助于检查事物的外观，而无需使用实际的 Web 环境。

TestRenderer.create（） 函数是一种 React 方法，可简化测试。它允许我们创建一种特定类型的实例来测试 React 组件的行为方式，而无需依赖实际的 Web 浏览器。所以基本上这个函数作为一个接口，为我们创建一个 TestRenderer 对象。

语法

TestRenderer.create(element, options);

参数

• element - 这是要测试的React组件。我们给它提供我们感兴趣的组件，TestRenderer 向我们展示它的行为方式。
• options - 这些是我们可以提供的附加设置，用于修改测试的执行方式。

返回值

使用 TestRenderer.create（） 后，它返回一个 TestRenderer 对象。我们可以使用此实例来检查一切是否正常工作。

例子

示例 - Hello World 应用程序及其测试

因此，首先我们将创建一个简单的 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';

// Create a TestRenderer instance
const testInstance = TestRenderer.create(<HelloWorldApp />);

// Log the result	
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';

// Create a TestRenderer instance
const testInstance = TestRenderer.create(<CounterApp />);

// Log the result
console.log(testInstance.toJSON());

输出

TestCounterApp 文件是 CounterApp 测试文件。为了创建 CounterApp 组件的实例，它使用 react-test-renderer 包中的 TestRenderer。然后，使用 toJSON（） 方法将组件 tree 转换为类似 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';

// Create a TestRenderer instance
const testInstance = TestRenderer.create(<TodoListApp />);

// Log the result
console.log(testInstance.toJSON());

输出

TestTodoListApp 文件是 TodoListApp 测试文件。为了创建 TodoListApp 组件的实例，它使用 react-test-renderer 包中的 TestRenderer。

总结

因此，TestRenderer.create（） 是一个有用的工具，可以为我们的 React 组件创建一个神奇的镜子，这样我们就可以在不需要真实网页的情况下看到它的外观。为了了解这种方法的用法，我们创建了不同的应用程序以更好地理解。