chiamando setState su un componente reactjs con utils test non ri-rendering componente

Question

ho il seguente codice in un test basato scherzo:

it('will show the hero loop if there is one', function() { 

    var React = require('react/addons'); 
    var ShowsDetailHeader = require('../../../../routes/shows/components/ShowsDetailHeader.jsx'); 
    var mockData = require('../../../../mock/episodeDetailData'); 
    mockData.data.show.assets._webHeroVideoUrl = 'https://test.video.com'; 

    var Subject = require('../../../../mock/stubRouterContext')(ShowsDetailHeader, { 
     show: mockData.data.show 
    }); 

    var TestUtils = React.addons.TestUtils; 

    var showsHeader = TestUtils.renderIntoDocument(
     <Subject /> 
    ); 

    showsHeader.setState({ 
     showVideo: true 
    }); 

    var videoClass = TestUtils.findRenderedDOMComponentWithClass(showsHeader, 'flex-video').getDOMNode().getAttribute('class'); 

    expect(videoClass.indexOf('in')).toBe(-1); 

    console.log(videoClass); 


    }); 

La mia prova precedente verifica lo stato iniziale del componente. Ora desidero chiamare setState per controllare il componente dopo un cambio di stato. La videoclass che sto registrando qui rimane la stessa. Sto reagendo 0.12. e ultimo jest 0.4.0.

Qualche idea su come testare cosa succede dopo lo stato impostato?

Answer 1

setState è asincrona, quindi probabilmente bisogno di

showsHeader.setState({ 
     showVideo: true 
    }); 
jest.runAllTicks(); 
find ... 
expect ... 

Ma penso che lo stato dovrebbe essere privato e non dovrebbe essere diretta cambiato, Stato dovrebbe essere il cambiamento all'interno di un componente, causa per evento ui o modifica dei dati. un'opzione utilizza props per pubblico, se si desidera modificare il componente dall'esterno.