反应开玩笑 - 确认状态已更改

Question

我正在使用jest来测试我的组件。

我想测试一个特定的方法，我知道该方法会改变状态。

it('should calculate width of publisher menu', () => {
    window.innerWidth = 3000
    const publisherContainer = new PubContainer(props)
    console.log(publisherContainer.state.maxVisibleTabs) // maxVisibleTabs is 1
    publisherContainer.resize() // here i'm using setState({maxVisibleTabs : 10})
    console.log(publisherContainer.state.maxVisibleTabs) // maxVisibleTabs is 1
})

我想检查resize实际上是否将setState设置为10，但值1仍然存在。

我知道setState是异步的，并且状态不会立即变异，但是我有没有优雅的解决方法来解决这个问题？

Answer 1

在测试中通常有三种方法来处理异步代码：

1. 以某种方式使异步代码同步。可能不是这里的选择。
2. 轮询被测系统，直到您获得正确的结果或超时。
3. 在生产代码中创建一种机制，允许测试知道发生了什么 - 例如，添加事件机制，以便组件外部的代码可以注册到状态更改。然后测试代码可以注册它们并等待事件发生。

不幸的是，Jest没有内置的轮询机制，但你可以使用setTimeout循环自己写一些简单的东西。

Answer 2

您可以将enzyme与jest一起使用，这使得测试反应组件变得更加容易。它附带一个update函数来解决这个问题。