輸入

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

概觀

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

從本質(zhì)上講，這個軟件包可以輕松獲取由React DOM或React Native組件呈現(xiàn)的平臺視圖層次結(jié)構(gòu)（類似于DOM樹）的快照，而無需使用瀏覽器或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的快照測試功能自動將JSON樹的副本保存到文件中，并檢查您的測試是否未更改。

您還可以遍歷輸出以查找特定節(jié)點(diǎn)并對其進(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)建一個實(shí)例。它不使用真正的DOM，但它仍然將組件樹完全渲染到內(nèi)存中，因此您可以對其進(jìn)行斷言。返回的實(shí)例具有以下方法和屬性。

testRenderer.toJSON()

testRenderer.toJSON()

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

testRenderer.toTree()

testRenderer.toTree()

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

testRenderer.update()

testRenderer.update(element)

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

testRenderer.unmount()

testRenderer.unmount()

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

testRenderer.getInstance()

testRenderer.getInstance()

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

testRenderer.root

testRenderer.root

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

testInstance.find()

testInstance.find(test)

找到一個單一的后代測試實(shí)例為其test(testInstance)返回true。如果test(testInstance)沒有完全返回true一個測試實(shí)例，則會引發(fā)錯誤。

testInstance.findByType()

testInstance.findByType(type)

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

testInstance.findByProps()

testInstance.findByProps(props)

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

testInstance.findAll()

testInstance.findAll(test)

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

testInstance.findAllByType()

testInstance.findAllByType(type)

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

testInstance.findAllByProps()

testInstance.findAllByProps(props)

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

testInstance.instance

testInstance.instance

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

testInstance.type

testInstance.type

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

testInstance.props

testInstance.props

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

testInstance.parent

testInstance.parent

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

testInstance.children

testInstance.children

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

思路

您可以傳遞createNodeMock函數(shù)TestRenderer.create作為選項(xiàng)，它允許自定義模擬參考。createNodeMock接受當(dāng)前元素并返回一個模擬參考對象。當(dāng)您測試依賴于參考的組件時(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);