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

【问题标题】：Test that a click event in React updates the HTML测试 React 中的点击事件是否更新 HTML
【发布时间】：2015-02-22 23:42:56
【问题描述】：

我已经设置了一些使用 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 之后的组件值

【问题讨论】：

如果您使用 Mocha 测试 DOM 更改，您可以使用 mochify 来提供帮助。我在 wiki 上写了一个关于如何测试 ReactJS 组件的示例，这可能会有所帮助：github.com/mantoni/mochify.js/wiki/…
如果您不想使用 setTimeout hack 或其他库。尝试为您的事件创建回调。例如 Paytable 上的 YearHeaderSelected 或类似内容。然后你可以把它传入并在你的测试中响应它

标签： javascript mocha.js reactjs

【解决方案1】：

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

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

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

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

【讨论】：

setTimeout 在这种情况下是一个 hack。这是一个糟糕的解决方案
是的，这是一个 hack，不幸的是我还没有找到解决这个问题的替代方案
为此目的使用setImmediate() 怎么样？由于它将操作排在其他所有操作之后，因此它似乎很合适？
没试过，应该可以。如果 TestUtils.Simulate.click 已经返回了一个 promise，或者提供了一个回调 api，事情会容易得多
@KoustuvSinha 我陷入了类似的境地。我们能找到解决办法吗？

【解决方案2】：

我已经花了很多时间试图找到一种干净的方式来处理异步...最终将其用于测试：

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

在底层，它使用 componentDidUpdate 生命周期来监听 props/state/route 的变化。

希望对大家有所帮助。无论如何，您的意见将不胜感激:)

【讨论】：