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' ]);
});

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

代码可用on Github。

我可以在setState

之后测试Component的其他方面，但不能测试Component值

Answer 1

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

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

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

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

Answer 2

我花了很多时间试图找到一种干净的方式来处理异步...结束了这个用于测试：

https://github.com/yormi/test-them-all

在幕后，它使用componentDidUpdate生命周期来监听道具/州/路线的变化。

希望它会帮助你们。无论如何，你的意见将不胜感激：）

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

2 个答案: