ReactComponent ağacına başvurduğunda tepki testi araçlarının beklentisi nedir?

Question

Reaksiyon bileşeni ile işlenen bazı d3 öğeleri için testler yazmaya çalışıyorum ve sayfadaki bazı svg öğelerini seçebilmeyi umuyordum ve en az olduğunu kontrol ediyorlar. beklenen.

ReactComponent ağacı dediğinde, tepki test araçlarının neler beklediğinden tam olarak emin değilim.

array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className) 

ben üzerinden belgeye benim bileşeni render ediyorum:

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

Ve başarıyla yaparak bir css SinifAdi denetlemek mümkün değilim:

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

Ama don ReactComponent ağacını bekleyen bu bulma/scry yöntemlerinden bazılarına gereksinim duyduğumu anlamıyorum.

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

Düzenleme:

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

... ve eleman bulmaya çalışıyorum: Daha fazla açıklama için

, bu bileşen için verilen DOM buna benzer.

Answer 1

Anladığım kadarıyla, TestUtils.renderIntoDocument() bir ReactComponent ağacı döndürüyor. Daha sonra bunları test etmek için tek tek bileşenleri o ağaçtan çekebilirsiniz. Örneğin, bu test benim için geçer. Eğer sadece tek bir bileşen render eğer

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); 
}); 

Yani, renderedTree kökü olacaktır. Fakat yine de, bu iddiaları kontrol edebilmek için,numaralı telefonun içinde işlenen MyComponent'u bulmanız gerekir.