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

酶包装器的功能find和update是同步的，无需使用async / await将它们作为promise解析。这也意味着它们将立即执行，而无需等待您的500ms超时。

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

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

然后await wait(500)（可能还有更多），然后再update使用该组件并声明结果

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

1 个答案: