Test Renderer - [ React中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

annuaire recherche

Reference Reference: Component Reference: React Advanced Guides Quick Start DOM Elements Glossary of React Terms JavaScript Environment Requirements props React Top-Level API React.Component ReactDOM ReactDOMServer Shallow Renderer state SyntheticEvent Test Renderer Test Utilities Component React API Accessibility Context Error Boundaries Higher-Order Components Integrating with Other Libraries JSX In Depth Optimizing Performance Portals React Without ES6 React Without JSX Reconciliation Refs and the DOM Static Type Checking Typechecking With PropTypes Uncontrolled Components Web Components Components and Props Composition vs Inheritance Conditional Rendering Forms Handling Events Installation Introducing JSX Lifting State Up Lists and Keys Rendering Elements State and Lifecycle Thinking in React

personnages

输入

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

概观

该包提供了一个React渲染器，可用于将React组件呈现为纯JavaScript对象，而不依赖于DOM或本地移动环境。

从本质上讲，这个软件包可以轻松获取由React DOM或React Native组件呈现的平台视图层次结构（类似于DOM树）的快照，而无需使用浏览器或jsdom。

例：

import TestRenderer from 'react-test-renderer';function Link(props) { return {props.children};}const testRenderer = TestRenderer.create( Facebook);console.log(testRenderer.toJSON());// { type: 'a',// props: { href: 'https://www.facebook.com/' },// children: [ 'Facebook' ] }

您可以使用Jest的快照测试功能自动将JSON树的副本保存到文件中，并检查您的测试是否未更改。

您还可以遍历输出以查找特定节点并对其进行断言。

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

TestRenderer

TestRenderer.create()TestRenderer实例

testRenderer.toJSON()

testRenderer.toTree()

testRenderer.update()

testRenderer.unmount()

testRenderer.getInstance()

testRenderer.root

TestInstance

testInstance.find()

testInstance.findByType()

testInstance.findByProps()

testInstance.findAll()

testInstance.findAllByType()

testInstance.findAllByProps()

testInstance.instance

testInstance.type

testInstance.props

testInstance.parent

testInstance.children

参考

`TestRenderer.create()`

TestRenderer.create(element, options);

TestRenderer使用传递的React元素创建一个实例。它不使用真正的DOM，但它仍然将组件树完全渲染到内存中，因此您可以对其进行断言。返回的实例具有以下方法和属性。

`testRenderer.toJSON()`

testRenderer.toJSON()

返回表示渲染树的对象。此树只包含特定于平台的节点，例如

or和它们的道具，但不包含任何用户编写的组件。这对于快照测试非常方便。

`testRenderer.toTree()`

testRenderer.toTree()

返回表示渲染树的对象。不同的是toJSON()，该表示比由其提供的表示更详细toJSON()，并且包括用户编写的组件。除非要在测试渲染器上编写自己的断言库，否则可能不需要此方法。

`testRenderer.update()`

testRenderer.update(element)

用新的根元素重新渲染内存树。这模拟了根上的React更新。如果新元素与前一个元素具有相同的类型和关键字，则树会被更新; 否则，它将重新安装一棵新树。

`testRenderer.unmount()`

testRenderer.unmount()

卸载内存树，触发适当的生命周期事件。

`testRenderer.getInstance()`

testRenderer.getInstance()

如果可用，返回对应于根元素的实例。如果根元素是一个功能组件，因为它们没有实例，这将不起作用。

`testRenderer.root`

testRenderer.root

返回对测试树中特定节点断言很有用的根“测试实例”对象。您可以使用它来查找下面更深的其他“测试实例”。

`testInstance.find()`

testInstance.find(test)

找到一个单一的后代测试实例为其test(testInstance)返回true。如果test(testInstance)没有完全返回true一个测试实例，则会引发错误。

`testInstance.findByType()`

testInstance.findByType(type)

使用提供的查找单个后代测试实例type。如果提供的测试实例不完全相同type，则会引发错误。

`testInstance.findByProps()`

testInstance.findByProps(props)

使用提供的查找单个后代测试实例props。如果提供的测试实例不完全相同props，则会引发错误。

`testInstance.findAll()`

testInstance.findAll(test)

找到所有的test(testInstance)回报测试实例true。

`testInstance.findAllByType()`

testInstance.findAllByType(type)

用提供的查找所有后代测试实例type。

`testInstance.findAllByProps()`

testInstance.findAllByProps(props)

用提供的查找所有后代测试实例props。

`testInstance.instance`

testInstance.instance

组件实例对应于此测试实例。它仅适用于类组件，因为功能组件没有实例。它匹配this给定组件内的值。

`testInstance.type`

testInstance.type

与此测试实例相对应的组件类型。例如，一个

`testInstance.props`

testInstance.props

这个测试实例对应的道具。例如，一个


          
           
            testInstance.parent
           
          
          
           
            此测试实例的父测试实例。
           
          
          
           
            testInstance.children
           
          
          
           
            testInstance.children
           
          
          
           
            子们测试这个测试实例的实例。
           
          
          
           
            思路
           
          
          
           
            您可以传递createNodeMock函数TestRenderer.create作为选项，它允许自定义模拟参考。createNodeMock接受当前元素并返回一个模拟参考对象。当您测试依赖于参考的组件时，这很有用。
           
          
          
           
            import TestRenderer from 'react-test-renderer'; class MyComponent extends React.Component { constructor(props) { super(props); this.input = null; } componentDidMount() { this.input.focus(); } render() { return  this.input = el} /> }}let focused = false; TestRenderer.create( , { createNodeMock: (element) => { if (element.type === 'input') { // mock a focus function return { focus: () => { focused = true; } }; } return null; } }); expect(focused).toBe(true);


        
         
          Article précédent：
          Article suivant：


  
  
   
    简体中文(ZH-CN)
    English(EN)
    繁体中文(ZH-TW)
    日本語(JA)
    한국어(KO)
    Melayu(MS)
    Français(FR)
    Deutsch(DE)

概观