Reagieren Test: Finding Komponenten innerhalb Component

Question

I unter

var myComponent = ReactTestUtils.findRenderedDOMComponentWithClass(myDiv, 'myComponent') 

eine Komponente bei dem ersten ‚Finder‘ im Code finden Wenn ich dann das zurück Component-Objekt verwenden und verwende ein noch tieferes Objekt wie zu finden so:

var myInput = ReactTestUtils.findRenderedDOMComponentWithClass(myComponent, 'myInput') 

ich diesen Fehler:

unveränderliche Verletzung: findAllInRenderedTree (...): Beispiel einsein mussVerbundbauteil bei invariant (node_modules/FBJS/lib/invariant.js: 44: 15)

I nicht herausfinden kann, was die Art, die aus zurückgegeben findRenderedDOMComponentWithClass weil (a) Javascript und (b) ReactTestUtils hat barely any documentation.

Mein ganzer Test sieht wie folgt aus:

import ReactTestUtils from 'react-dom/lib/ReactTestUtils'; 

describe('simple test', function() { 

    jsdom({ skipWindowCheck: true }); 

    it('Getting Simulate to Work', function() { 
    class SomeComponent extends React.Component { 
     render() { 
     return (
      <div className="myComponent"> 
      <input type="textfield" className="myInput" ></input> 
      <span className="child1" /> 
      </div> 
     ); 
     } 
    } 
    var myDiv = ReactTestUtils.renderIntoDocument(
     <SomeComponent/> 
    ); 
    var myComponent = ReactTestUtils.findRenderedDOMComponentWithClass(myDiv, 'myComponent') 
    var myInput = ReactTestUtils.findRenderedDOMComponentWithClass(myComponent, 'myInput') 
    }); 
}); 

Answer 1

Sie bekommen diesen Fehler, weil myInput kein Verbundbauteil ist. Es ist eine native Browsereingabe. Zusammengesetzte Komponenten sind Komponenten, die aus React.Component (nicht divs oder Spannen oder Eingaben oder Schaltflächen usw.) hergestellt werden.

Sie könnten stattdessen einen ref auf Ihre Eingabe hinzufügen:

<input type="textfield" className="myInput" ref="myInput"> 

und es React.findDOMNode mit finden:

React.findDOMNode(this.refs.myInput)

(wo this hier auf eine Instanz der Komponente, die die Eingabe enthält, bezieht sich In Ihrem Fall müssten Sie dies innerhalb der Definition von SomeComponent irgendwo nennen).

und dann sollten Sie nur verwenden findRenderedDOMComponentWithClass Komponenten zu finden, die Instanzen von React.Component sind (das heißt reagieren Komponenten, die Sie als Klassen definieren und als Komponente registrieren mit class SomeComponent extends React.Component reagieren).