ReactJS 测试渲染器

不使用 DOM 或本机移动环境，此软件包提供了一个React渲染器，可用于将React组件转换为纯JavaScript对象。

本质上，此软件包简化了通过React DOM 或React Native组件生成的平台视图层次结构（类似于DOM树）的截屏过程，而无需浏览器或 jsDOM 。

导入：

import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm

TestRenderer：

1.TestRenderer.create）： 使用提供的React元素创建一个 TestRenderer 对象。尽管它不使用真实的DOM，但组件树完全呈现在内存中，以便您可以对其进行声明。返回一个 TestRenderer实例 。

语法：

TestRenderer.create(element, options);

2. TestRenderer.act(): 类似于 react-dom/test-utils act()函数 ， TestRenderer.act 准备好组件以供断言使用。使用此版本的 act() 函数对 TestRenderer.create 和 TestRenderer.update 进行包装调用。

语法:

TestRenderer.act(callback);

TestRenderer实例:

1. testRenderer.toJSON() : 返回呈现的树的表示形式作为对象。这棵树中没有用户编写的组件；它只包括平台特定的节点，如 <div> 和 <view> ，以及它们关联的属性。这对于 测试快照很有用。

语法:

testRenderer.toJSON()

2. testRenderer.toTree() : 作为对象返回呈现树的表示。该表示包括用户编写的组件，比 toJSON() 提供的表示更详尽。除非您在测试渲染器之上构建自己的断言库，否则您可能不需要此方法。

语法：

testRenderer.toTree()

3. testRenderer.update(): 创建一个新的根元素并重新绘制内存中的树。在根节点上，这模拟了React的更新。如果新元素与旧元素具有相同的类型和键值，则树将被更新。

语法：

testRenderer.update(element)

4. testRenderer.unmount() : 当内存中的树被卸载时，正确的生命周期事件被触发。

语法：

testRenderer.unmount()

5. testRenderer.getInstance(): 如果可用，返回与根元素对应的实例。由于函数组件没有实例，如果根元素是函数组件，这将无效。

语法:

testRenderer.getInstance()

6. testRenderer.root : 返回可以用来对特定树节点做断言的根“测试实例”对象。

语法:

testRenderer.root

文本实例：

1. testInstance.find()： 单一的后代测试实例必须返回 true 才能找到 test(testInstance) 。如果它不仅对一个测试实例返回 true ，则 Test(testInstance) 将抛出异常。

语法：

testInstance.find(test)

2. testInstance.findByType(): 找到指定类型的后代测试中一个实例。如果指定类型的测试实例不只有一个，将会产生错误。

语法：

testInstance.findByType(type)

3. testInstance.findByProps(): 使用给定的props，查找单个子节点测试实例。如果没有给定props的确切一个测试实例，则会抛出错误。

语法:

testInstance.findByProps(props)

4. testInstance.findAll(): 查找所有已经是祖先并且返回true的测试实例testInstance。

语法：

testInstance.findAll(test)

5. testInstance.findAllByType() : 查找与给定类型匹配的每个子测试实例。 **

语法：

testInstance.findAllByType(type)

6.testInstance.findAllByProps()： 使用提供的 props 来定位所有的子节点测试实例。

语法：

testInstance.findAllByProps(props)

7. testInstance.instance: 与此测试实例对应的组件实例。由于函数组件中缺少实例，因此仅适用于类组件。它是与提供的组件的 this 值匹配的实例。

语法:

testInstance.instance

8.testInstance.type: 此测试实例的组件所属的组件类型。例如，一个名为 <Button/> 的组件具有类型为 Button。

语法：

testInstance.type

9. testInstance.props : 应用于此测试实例的属性。例如，一个 <Button size=”small” /> 组件的属性为 { size: ‘small’} 。

语法:

testInstance.props

10. testInstance.parent: 此测试实例的父级测试实例。

语法:

testInstance.parent

11.testInstance.children: 此测试实例的子测试实例。

语法:

testInstance.children

创建React项目：

步骤1： 通过npm命令安装react模块来创建一个React应用程序。

npm create-react-app project name

步骤2: 在创建完你的React项目后，进入该文件夹执行不同的操作。

cd project name

步骤3： 在终端中运行以下命令来安装所需模块：

npm i react-test-renderer

步骤4： 创建ReactJS应用后，将以下依赖项导入到您的应用程序中。

import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm

项目结构: 项目结构应如下所示:

ReactJS 测试渲染器

示例1：

index.js

import React from 'react'; 
import TestRenderer from 'react-test-renderer'; 
import App from './App'; 
  
const testRenderer = TestRenderer.create(<App />); 
console.log(testRenderer.toJSON());

App.js

import React from 'react'; 
  
class App extends React.Component { 
    render() { 
        return ( 
            <div> 
                <h1>Hello World!</h1> 
                <p>This is a test of the React Renderer.</p> 
            </div> 
        ); 
    } 
} 
  
export default App;

运行应用程序的步骤： 打开终端并输入以下命令。

npm start

输出：

ReactJS 测试渲染器

解释: 我们正在使用来自 react-test-renderer 库的ReactTestRenderer来创建一个组件并测试其渲染输出。使用 toJSON() 方法获取组件的 JSON 表示。

示例2:

App.js

import TestRenderer from 'react-test-renderer'; 
  
function MyComponent() { 
    return ( 
        <div> 
            <SubComponent foo="bar" /> 
            <p className="my">Hello GFG</p> 
        </div> 
    ) 
} 
  
function SubComponent() { 
    return ( 
        <p className="sub">Sub</p> 
    ); 
} 
  
const testRenderer = TestRenderer.create(<MyComponent />); 
const testInstance = testRenderer.root; 
  
expect(testInstance.findByType(SubComponent).props.foo).toBe('bar'); 
expect(testInstance.findByProps({ className: "sub" }).children).toEqual(['Sub']);

index.js

import TestRenderer from 'react-test-renderer'; 
  
function Link(props) { 
    return <a href={props.page}>{props.children}</a>; 
} 
  
const testRenderer = TestRenderer.create( 
    <Link page="https://www.instragram.com/">Facebook</Link> 
); 
  
console.log(testRenderer.toJSON());

运行应用程序的步骤： 在终端中打开，并输入以下命令。