javascript - React jest - 验证状态已更改

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 循环自己编写一些简单的东西。