reactjs - 使用测试工具在reactjs组件上调用setState不重新渲染组件

Question

我在基于 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);


  });

我之前的测试测试了组件的初始状态。我现在想在状态更改后调用 setState 来检查组件。我在这里记录的 videoClass 保持不变。我正在使用react 0.12。和最新的 Jest 0.4.0。

关于如何测试设置状态后会发生什么有什么想法吗？

Answer 1

setState 是异步的，所以你可能需要

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

但我认为状态应该是私有(private)的，不应该直接更改，状态应该在组件内部更改，由 ui 事件或数据更改引起。 如果您想从外部更改组件，一个选项是使用 props 进行公开。