测试React中的单击事件是否更新了HTML

Question

我已经设置了一些使用Mocha显示表的React组件的测试.我可以在其初始状态断言,但我有一个点击事件,它对我要测试的数据进行排序.

如果我React.addons.TestUtils.Simulate.click(theComponent)用来尝试测试排序.

• 我可以看到事件得到处理,
• 国家改变被解雇了
• 在调用之前对数据进行排序 setState

但是当我对组件断言时,没有任何改变.

it('sorts the data when the year header is clicked', function() {
    var React = require('react/addons');
    var TestUtils = React.addons.TestUtils;

    var payTable = TestUtils.renderIntoDocument(
        <PayTable payYears={data} />
    );

    var headers = TestUtils.scryRenderedDOMComponentsWithTag(payTable, 'th');
    var yearHeader = headers[0];
    TestUtils.Simulate.click(yearHeader.getDOMNode());

    var columnValues = getYearColumnValues(payTable, TestUtils);
    columnValues.should.match([ 'Year', '1066', '1067', '1068' ]);
});

我需要强制更新吗？重新阅读组件？

该代码可在Github上获得.

我可以测试Component的其他方面,但不能测试Component值 setState

Answer 1

我遇到过同样的问题。问题是，TestUtils.Simulate.click(yearHeader.getDOMNode())单击 DOM，会带来数据排序和 DOM 操作。即使您使用 jsDom 而不是真正的 dom，此操作本身也是一个异步事件。因此，只需在单击事件之后立即检查 DOM 状态即可进行同步调用，其中 DOM 状态尚未更改。

解决方案是，使用setTimeout0 毫秒超时，并检查 DOM 状态。至于你的例子：

setTimeout(function() {
  var columnValues = getYearColumnValues(payTable, TestUtils);
  columnValues.should.match([ 'Year', '1066', '1067', '1068' ]);
},0)

这将使您的 DOM 更新其状态，并且您将能够测试您的组件。