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

Question

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

import React, { useState } from 'react'
import { mount } from 'enzyme'

const Conceito = () => {
  const [alerta, setAlerta] = useState(false)

  const pesquisarOnClick = () => {
    setTimeout(() => setAlerta(true), 500)
  }

  return (
    <div>
      { alerta && <div data-component="Alerta">Mensagem</div> }
      <button
        action-trigger="pesquisar"
        onClick={pesquisarOnClick}
      >Pesquisar</button>
    </div>
  )
}

describe('<Conceito/>', () => {
  it('prova de conceito', async () => {
    const wrapper = mount(<Conceito/>)
    expect(wrapper.find(`[data-component='Alerta']`)).toHaveLength(0)
    wrapper.find(`[action-trigger='pesquisar']`).simulate(`click`)
    await wrapper.update()
    expect(await wrapper.find(`[data-component='Alerta']`)).toHaveLength(1)
  })
})

我的错误在哪里？

Answer 1

Enzyme wrapper 的函数 find 和 update 是同步的，无需使用 async/await 将它们解析为 Promise。这也意味着它们会立即执行，而无需等待您的 500 毫秒超时。

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

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

然后await wait(500)（可能更多）在您之前update 组件并声明您的结果