Che cosa si aspettano i test-utils quando si riferiscono all'albero ReactComponent?

Question

Sto provando a scrivere test per alcuni elementi d3 che sono resi tramite componente react, e speravo di essere in grado di scegliere alcuni degli elementi svg sulla pagina e controllare la loro larghezza per vedere se si comportano come previsto.

Non sono del tutto sicuro di cosa si aspettino i documenti react test-utils quando dicono albero ReactComponent.

array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className) 

sto rendendo la mia componente nel documento tramite:

var component = TestUtils.renderIntoDocument(
    <ProgressCircle percentage={75} /> 
); 

e sono in grado di controllare con successo per un className css facendo:

it('should render an element with the class "progress-circle"', function() { 
    var circleContainer = TestUtils.findRenderedDOMComponentWithClass(component, 'progress-circle'); 
    expect(circleContainer).toBeDefined(); 
    }); 

Ma don Comprendo ciò che ho bisogno di fornire ad alcuni di questi metodi find/scry che si aspettano un albero ReactComponent.

http://facebook.github.io/react/docs/test-utils.html

Edit:

Per ulteriori chiarimenti, il DOM reso per questo componente si presenta così:

<div class="progress-circle"> 
    <svg> 
    <g> 
    </g> 
    </svg> 
</div> 

... e sto cercando di trovare l'elemento.

Answer 1

Da quello che ho capito, TestUtils.renderIntoDocument() restituisce un albero ReactComponent. Quindi puoi estrarre i singoli componenti da quell'albero per testarli.

Ad esempio, questo test passa per me.

it('demonstrates the ReactComponent tree', function() { 
    var React = require('react/addons'); 
    var TestUtils = React.addons.TestUtils; 
    var MyComponent = require('../MyComponent.jsx'); 

    var renderedTree = TestUtils.renderIntoDocument(<MyComponent />); 
    var renderedMyComponent = TestUtils.findRenderedDOMComponentWithClass(renderedTree, 'my-component') 

    expect(TestUtils.isDOMComponent(renderedMyComponent)).toBe(true); 
}); 

Quindi, se si sta solo il rendering di un singolo componente, sarà la radice del renderedTree. Ma devi ancora trovare il rendering MyComponent all'interno dello renderedTree prima di poter controllare le asserzioni contro di esso.