javascript - 使用异步 setState 进行 react 测试

Question

我是 React 测试的新手，我很难弄清楚以下问题:

我正在尝试模拟输入 onChange 事件。它是一个文本输入，用于过滤表格中的结果。 InteractiveTable 有一个受控输入字段 (ControlledInput) 和一个 Facebook 的 FixedDataTable 实例。

这是测试:

let filter = ReactTestUtils.findRenderedComponentWithType(component, ControlledInput);
let input = ReactTestUtils.findRenderedDOMComponentWithTag(filter, 'input');
input.value = 'a';
ReactTestUtils.Simulate.change(input);
console.log(component.state);

在输入更改时，组件会使用输入值更新其状态，但由于 setState 是异步的，这里的 console.log 将注销之前的状态，我无法查询测试组件的结构，因为它还没有更新。我错过了什么？

编辑:要清楚，如果我在 setTimeout 中进行断言，它将通过，因此这肯定是 setState 的异步性质的问题。

我找到了一个解决方案，我覆盖了组件的 componentDidUpdate 方法:

component.componentDidUpdate = () => {
  console.log(component.state); // shows the updated state
  let cells = ReactTestUtils.scryRenderedComponentsWithType(component, Cell);
  expect(cells.length).toBe(30);
  done();
};

如果组件有自己的 componentDidUpdate 方法，这是不可能的，所以这不是一个好的解决方案。这似乎是一个非常普遍的问题，但我找不到解决办法。

Answer 1

通常当我在测试时遇到类似的场景时，我会尝试将事情分解开来。在您当前的测试中，(取决于您的测试框架的风格)，您可以模拟组件的 setState 方法，并简单地确保在模拟更改时以您期望的方式调用它。

如果你想进一步覆盖，在不同的测试中你可以用一些模拟数据调用真正的 setState，然后使用 callback对呈现的内容做出断言，或确保调用其他内部方法。

或者:如果您的测试框架允许 simulating async东西，你也可以尝试调用它并一次性测试整个东西。