Reagieren - Besitzer Ownee Unit Testing

Question

Versuchen, React's Test-Utils zu verwenden(), um meine Komponente zu testen.

Wir haben Besitzer und Ownee.

Besitzer macht:

<Ownee> 
    <div class="inner"> 
     <div class="moreInner" /> 
    </div> 
</Ownee> 

Mein Test ist wie so:

var comp = TestUtils.renderIntoDocument(<Owner />); 
var innerClass = TestUtils.findRenderedDOMComponentWithClass(comp, "inner"); 
expect(innterClass).to.not.be.null; 

Idealfall sollte dies gut funktionieren. Aber eigentlich gibt es aus: "Habe nicht genau eine Übereinstimmung gefunden (gefunden: 0)".

Also, wenn ich die <Ownee></Ownee> oben entfernen, so wie es ist:

<div class="inner"> 
     <div class="moreInner" /> 
    </div> 

Es funktioniert wie erwartet, aber das kann ich nicht verwenden (Muss das Ownee Element machen).

Ownee machen so etwas wie so:

<div class="inner"> 
    {this.props.children} 
</div> 

Vorschläge, wie TestUtils verwenden, um das gewünschte Ergebnis zu erhalten (das ist der Test zu arbeiten und die div von Klasse zu finden)?

Danke!

Answer 1

Also das Problem war nicht Besitzer/Ownee. Es endete damit, dass ich den modalen Dialog von React-Bootstrap (als der Ownee) benutzte. Was passiert ist, war, dass der Test die Komponente rendern würde, aber sie würde auf einen anderen Komponentenbaum gesetzt werden.

Um dies zu umgehen, folgte ich eine Frage vorher gestellt: Testing a React Modal component

Insbesondere Antwort des user1778856.

var stubModal =() => { 
    var createElement = React.createElement; 
    modalStub = sinon.stub(React, 'createElement', function (elem: any) { 
     return elem === ModalDialog ? 
      React.DOM.div.apply(this, [].slice.call(arguments, 1)) : 
      createElement.apply(this, arguments); 
    }); 
    return modalStub; 
}; 
var stubModalRestore =() => { 
    if (modalStub) { 
     modalStub.restore(); 
     modalStub = undefined; 
    } else { 
     console.error('Cannot restore nonexistent modalStub'); 
    } 
}; 

before(() => { stubModal(); }); 
after(() => { stubModalRestore(); }); 

Andere Links: Unit testing React Bootstrap modal dialog