gọi setstate trên một thành phần reactjs với utils thử nghiệm không tái render thành phần

Question

Tôi có đoạn code sau đây trong một bài kiểm tra dựa jest:

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


    }); 

thử nghiệm trước đây của tôi kiểm tra tình trạng ban đầu của các thành phần. Bây giờ tôi muốn gọi setState để kiểm tra thành phần sau khi thay đổi trạng thái. VideoClass tôi đang đăng nhập ở đây vẫn giữ nguyên. Tôi phản ứng 0,12. và jest mới nhất 0.4.0.

Bất kỳ ý tưởng nào về cách kiểm tra điều gì xảy ra sau khi đặt trạng thái?

Answer 1

setState là async, vì vậy bạn có thể cần

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

Nhưng tôi nghĩ rằng nhà nước nên là riêng tư và không nên trực tiếp thay đổi, nhà nước nên có sự thay đổi bên trong một thành phần, nguyên nhân bởi sự kiện ui hoặc thay đổi dữ liệu. tùy chọn đang sử dụng props cho công chúng, nếu bạn muốn thay đổi thành phần từ bên ngoài.