輸入

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

概觀

該包提供了一個(gè)React渲染器，可用于將React組件呈現(xiàn)為純JavaScript對(duì)象，而不依賴于DOM或本地移動(dòng)環(huán)境。

從本質(zhì)上講，這個(gè)軟件包可以輕松獲取由React DOM或React Native組件呈現(xiàn)的平臺(tái)視圖層次結(jié)構(gòu)（類似于DOM樹(shù)）的快照，而無(wú)需使用瀏覽器或jsdom。

例：

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.facebook.com/">Facebook</Link>);console.log(testRenderer.toJSON());// { type: 'a',//   props: { href: 'https://www.facebook.com/' },//   children: [ 'Facebook' ] }

您可以使用Jest的快照測(cè)試功能自動(dòng)將JSON樹(shù)的副本保存到文件中，并檢查您的測(cè)試是否未更改。

您還可以遍歷輸出以查找特定節(jié)點(diǎn)并對(duì)其進(jìn)行斷言。

import TestRenderer from 'react-test-renderer';
function MyComponent() {  return (    <div>      <SubComponent foo="bar" />      <p className="my">Hello</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']);

TestRenderer

• TestRenderer.create()TestRenderer實(shí)例

• 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元素創(chuàng)建一個(gè)實(shí)例。它不使用真正的DOM，但它仍然將組件樹(shù)完全渲染到內(nèi)存中，因此您可以對(duì)其進(jìn)行斷言。返回的實(shí)例具有以下方法和屬性。

testRenderer.toJSON()

testRenderer.toJSON()

返回表示渲染樹(shù)的對(duì)象。此樹(shù)只包含特定于平臺(tái)的節(jié)點(diǎn)，例如<div>or <View>和它們的道具，但不包含任何用戶編寫(xiě)的組件。這對(duì)于快照測(cè)試非常方便。

testRenderer.toTree()

testRenderer.toTree()

返回表示渲染樹(shù)的對(duì)象。不同的是toJSON()，該表示比由其提供的表示更詳細(xì)toJSON()，并且包括用戶編寫(xiě)的組件。除非要在測(cè)試渲染器上編寫(xiě)自己的斷言庫(kù)，否則可能不需要此方法。

testRenderer.update()

testRenderer.update(element)

用新的根元素重新渲染內(nèi)存樹(shù)。這模擬了根上的React更新。如果新元素與前一個(gè)元素具有相同的類型和關(guān)鍵字，則樹(shù)會(huì)被更新; 否則，它將重新安裝一棵新樹(shù)。

testRenderer.unmount()

testRenderer.unmount()

卸載內(nèi)存樹(shù)，觸發(fā)適當(dāng)?shù)纳芷谑录?/p>

testRenderer.getInstance()

testRenderer.getInstance()

如果可用，返回對(duì)應(yīng)于根元素的實(shí)例。如果根元素是一個(gè)功能組件，因?yàn)樗鼈儧](méi)有實(shí)例，這將不起作用。

testRenderer.root

testRenderer.root

返回對(duì)測(cè)試樹(shù)中特定節(jié)點(diǎn)斷言很有用的根“測(cè)試實(shí)例”對(duì)象。您可以使用它來(lái)查找下面更深的其他“測(cè)試實(shí)例”。

testInstance.find()

testInstance.find(test)

找到一個(gè)單一的后代測(cè)試實(shí)例為其test(testInstance)返回true。如果test(testInstance)沒(méi)有完全返回true一個(gè)測(cè)試實(shí)例，則會(huì)引發(fā)錯(cuò)誤。

testInstance.findByType()

testInstance.findByType(type)

使用提供的查找單個(gè)后代測(cè)試實(shí)例type。如果提供的測(cè)試實(shí)例不完全相同type，則會(huì)引發(fā)錯(cuò)誤。

testInstance.findByProps()

testInstance.findByProps(props)

使用提供的查找單個(gè)后代測(cè)試實(shí)例props。如果提供的測(cè)試實(shí)例不完全相同props，則會(huì)引發(fā)錯(cuò)誤。

testInstance.findAll()

testInstance.findAll(test)

找到所有的test(testInstance)回報(bào)測(cè)試實(shí)例true。

testInstance.findAllByType()

testInstance.findAllByType(type)

用提供的查找所有后代測(cè)試實(shí)例type。

testInstance.findAllByProps()

testInstance.findAllByProps(props)

用提供的查找所有后代測(cè)試實(shí)例props。

testInstance.instance

testInstance.instance

組件實(shí)例對(duì)應(yīng)于此測(cè)試實(shí)例。它僅適用于類組件，因?yàn)楣δ芙M件沒(méi)有實(shí)例。它匹配this給定組件內(nèi)的值。

testInstance.type

testInstance.type

與此測(cè)試實(shí)例相對(duì)應(yīng)的組件類型。例如，一個(gè)<Button />組件有一個(gè)類型Button。

testInstance.props

testInstance.props

這個(gè)測(cè)試實(shí)例對(duì)應(yīng)的道具。例如，一個(gè)<Button size="small />組件具有{size: 'small'}道具。

testInstance.parent

testInstance.parent

此測(cè)試實(shí)例的父測(cè)試實(shí)例。

testInstance.children

testInstance.children

子們測(cè)試這個(gè)測(cè)試實(shí)例的實(shí)例。

思路

您可以傳遞createNodeMock函數(shù)TestRenderer.create作為選項(xiàng)，它允許自定義模擬參考。createNodeMock接受當(dāng)前元素并返回一個(gè)模擬參考對(duì)象。當(dāng)您測(cè)試依賴于參考的組件時(shí)，這很有用。

import TestRenderer from 'react-test-renderer';
class MyComponent extends React.Component {  constructor(props) {    super(props);    this.input = null;  }  
componentDidMount() {    this.input.focus();  }  render() {    
    return <input type="text" ref={el => this.input = el} />  }}let focused = false;
    TestRenderer.create(  <MyComponent />,  {
    createNodeMock: (element) => {      if (element.type === 'input') {        
    // mock a focus function        
        return {
          focus: () => {
            focused = true;          }        };      }      return null;    }  });
            expect(focused).toBe(true);