ReactJS - testRenderer.root 属性

---

---

“testRenderer.root”是一个编程命令。它就像一把钥匙，可以解锁并允许进入测试结构的主要或上层。此键允许程序员评估和测试应用程序的各种元素或部分。

它就像一棵树的主要分支，引导我们穿过代表应用程序中不同元素的树枝和树叶。简单来说，“testRenderer.root”允许开发人员审查并确保其代码中的所有内容都正常运行。

语法

 testRenderer.root

参数

此方法不接受任何参数。

返回值

此方法将返回主要的“测试实例”或检查和理解代码不同部分的起点。

例子

示例 − 基本组件测试

将有一个简单的 React 组件 （MyComponent.js） 和相应的测试文件 （MyComponent.test.js）。这是一个基本的 React 功能组件，名为 MyComponent。它不需要任何属性，只是返回一个 JSX 元素，呈现一个带有文本“Hello， World！”的 <div>。MyComponent.test.js是 MyComponent 的测试文件。它使用 react-test-renderer 库，这是一个用于在测试中渲染组件的 React 包。测试函数用于定义测试用例，检查 MyComponent 是否正确呈现。

MyComponent.js

import React from 'react';

const MyComponent = () => {
	 	return <div>Hello, World!</div>;
};

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import TestRenderer from 'react-test-renderer';
import MyComponent from './MyComponent';

test('renders MyComponent correctly', () => {
	 	const testRenderer = TestRenderer.create(<MyComponent />);
	 	const root = testRenderer.root;
	 	
	 	// Perform assertions using root
	 	expect(root.findByType('div').props.children).toBe('Hello, World!');
});

输出

因此，它执行断言，检查 MyComponent 中 <div> 元素的文本内容是否为“Hello， World！”。

示例 - 使用道具进行测试

在这个应用程序中，代码由一个 React 组件 （Greeting.js） 和一个相应的测试文件 （Greeting.test.js） 组成。Greeting.js 是一个名为 Greeting 的 React 功能组件。它采用一个 prop 名称，并使用它来动态呈现 <div> 元素中的问候消息。该消息显示“Hello”，后跟 name 属性的值。Greeting.test.js 是 Greeting 组件的测试文件。它使用 react-test-renderer 库来创建一个测试渲染器，并渲染 Greeting 组件，并将属性名称设置为“Ankit”。

Greeting.js

import React from 'react';

const Greeting = ({ name }) => {
return <div>Hello, {name}!</div>;
};

export default Greeting;

Greeting.test.js

import React from 'react';
import TestRenderer from 'react-test-renderer';
import Greeting from './Greeting';

test('renders Greeting correctly with props', () => {
	 	const testRenderer = TestRenderer.create(<Greeting name="Ankit" />);
	 	const root = testRenderer.root;
	 	
	 	// Perform assertions using root
	 	expect(root.findByType('div').props.children).toBe('Hello, Ankit!');
});

输出

例

在这个应用程序中，我们将有一个 React 组件 （Counter.js） 和一个相应的测试文件 （Counter.test.js）。Counter.js文件是一个 React 功能组件。它使用 useState 钩子维护状态变量计数，初始化为 0。该组件呈现一个 <div>其中包含一个 <p> 元素，该元素显示当前计数和一个 <button>当单击该元素时，该元素将调用增量函数并更新计数。Counter.test.js文件是 Counter 组件的测试文件。创建测试用例是为了检查单击按钮时计数是否正确递增。

Counter.js

import React, { useState } from 'react';

const Counter = () => {
	 	const [count, setCount] = useState(0);
	 	
	 	const increment = () => setCount(count + 1);
	 	
	 	return (
	 	 	 <div>
	 	 	 	 	<p>Count: {count}</p>
	 	 	 	 	<button onClick={increment}>Increment</button>
	 	 	 </div>
	 	);
};

export default Counter;

Counter.test.js

import React from 'react';
import TestRenderer from 'react-test-renderer';
import Counter from './Counter';

test('increments count when the button is clicked', () => {
	 	const testRenderer = TestRenderer.create(<Counter />);
	 	const root = testRenderer.root;
	 	
	 	// Check initial count
	 	expect(root.findByType('p').props.children).toBe('Count: 0');
	 	
	 	// Simulate button click
	 	root.findByType('button').props.onClick();
	 	
	 	// Check if count is incremented
	 	expect(root.findByType('p').props.children).toBe('Count: 1');
});

输出

总结

testRenderer.root 是用于测试 React 组件的方法。当使用像 react-test-renderer 这样的测试库时，此方法提供对渲染组件树的根或顶级实例的访问。它允许测试人员对组件的不同部分进行断言和执行测试。因此，我们已经看到了这种方法的用法，并创建了三个不同的应用程序来实际理解这个概念。