Reactjs 组件在异步更改状态后未更新

在我的应用程序中，我有一个如下所示的测试，但在单击后，该语句不正确，即使手动测试的行为有效：

import React，{useState}来自“React”
从“酶”导入{mount}
const Conceito=（）=>{
常量[alerta，setAlerta]=useState（false）
const pesquisarOnClick=（）=>{
setTimeout（（）=>setAlerta（true），500）
  }
返回(
    
{alerta&&Mensagem}
佩斯奎萨尔
    
  )
}
描述（“”，（）=>{
它（'prova de conceito'，async（）=>{
const wrapper=mount（）
expect（wrapper.find（`[data component='Alerta']`））.toHaveLength（0）
find（`action trigger='pesquisar']`）.simulate（`click`）
等待包装器。更新（）
expect（wait wrapper.find（`[data component='Alerta']`））.toHaveLength（1）
  })
})

---

我的错误在哪里？

酶包装器的函数

find

和

update

是同步的，不需要使用async/await作为承诺来解决它们。这也意味着它们将立即执行，而无需等待500毫秒超时

如果您需要专门等待这500毫秒，您可能需要在测试中引入某种等待函数：

function wait(miliseconds) {
  return new Promise((resolve) => {
    setTimeout(resolve, miliseconds)
  })
}

---

然后

wait wait（500）

（可能更多）再

更新组件并断言结果

我知道查找和更新是同步的，但我在单击“pesquisar”时的结果不是。因此，我认为我必须在测试中使用async/wait，以等待承诺（setTimeout）解析并更改alerta状态。如果

pesquisarOnClick

的状态设置器是已解析承诺的结果，它不会改变酶的功能是同步的这一事实。Ezyme只是触发onClick事件，不知道您的处理程序是异步的，需要等待。```lang js import{render，firevent，waitForElement}来自'@testing library/react'描述（'''，（）=>{it（'prova de conceito'，async（）=>{const{container}=render（）expect（container.querySelector（'[data component='Alerta']>）.toBeNull（）fireEvent.click（container.querySelector（[action trigger='pesquisar']）expect（Wait waitForElement（（）=>container.querySelector（[data component='Alerta']）。not toBeNull（））```