calling setState on a reactjs component with test utils not re-rendering component

Question

I have the following code in a jest based test:

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


  });

My previous test tests the initial state of the component. I now want to call setState to check the component after a state change. The videoClass i'm logging here stays the same. I am on react 0.12. and latest jest 0.4.0.

Any ideas on how to test what happens after set state?

Answer 1

setState is async, so you probably need

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

But I think state should be private and shouldn't be direct changed, state should be change inside a component, cause by ui event or data change. an option is usingprops for public, if you wanna change the component from outside.