测试React中的点击事件是否会更新HTML

Test that a click event in React updates the HTML

本文关键字：是否 更新 HTML 事件 React 测试      更新时间：2024-03-26

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

如果我使用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上获得。

我可以测试组件的其他方面，但不能测试setState 之后的组件值

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

解决方案是，使用超时为0毫秒的setTimeout，并在那里检查DOM状态。例如：

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

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

我花了很多时间试图找到一种干净的异步方式。。。最终做了这个测试：

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

在后台，它使用componentDidUpdate生命周期来监听道具/状态/路由的更改。

希望它能帮助你们。无论如何，我们将非常感谢您的意见：）

相关文章：