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

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

代码可用on Github .

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

Answer 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 更新其状态，您将能够测试您的组件。