ReactJS - testRenderer.root 属性
"testRenderer.root"是一个编程命令。它就像一把钥匙，可以解锁并允许进入测试结构的主要或上层。这把钥匙允许程序员评估和测试应用程序的各种元素或部分。
它就像一棵树的主枝，引导我们穿过代表应用程序中不同元素的树枝和树叶。简单来说，"testRenderer.root"允许开发人员检查并确保其代码中的所有内容均正常运行。
语法
testRenderer.root
参数
此方法不接受任何参数。
返回值
此方法将返回主"测试实例"或检查和理解代码不同部分的起点。
示例
示例 − 基本组件测试
将有一个简单的 React 组件 (MyComponent.js) 和一个相应的测试文件 (MyComponent.test.js)。这是一个名为 MyComponent 的基本 React 功能组件。它不接受任何 props，只返回一个 JSX 元素，渲染一个 <div>文本为"Hello, World!"。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;
// 使用 root 执行断言
expect(root.findByType('div').props.children).toBe('Hello, World!');
});
输出
因此，它执行断言，检查 MyComponent 内 <div> 元素的文本内容是否为"Hello, World!"。
使用 Props 进行测试的示例 −
在此应用中，代码由一个 React 组件 (Greeting.js) 和一个相应的测试文件 (Greeting.test.js) 组成。Greeting.js 是一个名为 Greeting 的 React 函数组件。它采用 prop 名称并使用它来动态呈现 <div> 元素中的问候消息。消息显示"Hello"，后跟名称 prop 的值。Greeting.test.js 是 Greeting 组件的测试文件。它使用 react-test-renderer 库创建一个测试渲染器，并渲染 Greeting 组件，并将 prop 名称设置为"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;
// 使用 root 执行断言
expect(root.findByType('div').props.children).toBe('Hello, Ankit!');
});
输出
示例
在此应用中，我们将有一个 React 组件 (Counter.js) 和一个相应的测试文件 (Counter.test.js)。Counter.js 文件是一个 React 函数组件。它使用 useState Hooks(钩子)维护状态变量 count，初始化为 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;
// 检查初始计数
expect(root.findByType('p').props.children).toBe('Count: 0');
// 模拟按钮点击
root.findByType('button').props.onClick();
// 检查计数是否递增
expect(root.findByType('p').props.children).toBe('Count: 1');
});
输出
摘要
testRenderer.root 是用于测试 React 组件的方法。当使用 react-test-renderer 等测试库时，此方法提供对渲染组件树的根或顶级实例的访问。它允许测试人员对组件的不同部分进行断言和执行测试。因此，我们已经了解了此方法的用法，并创建了三个不同的应用程序来实际理解此概念。
