Дополнительное ожидание в асинхронных тестах реактивных перерывов

Question

У меня есть следующий кусок кода:

async fetchAndUpdate () {
  const endpoint = 'endpoint'
  this.setState({ configFetched: false })
  try {
    const response =
      await window.fetch(`https://${window.location.host}/${endpoint}`,
        { method: 'POST',
          credentials: 'same-origin'
        })

    if (!response.ok) {
      throw new Error(`statusText: ${response.statusText}, status: ${response.status}`)
    }

    // const result = await response.json()
    // if (!result) {
    //  throw new Error(`status: ${response.status}, result: false`)
    // }

    this.setState({ configFetched: true })
    console.log('End of implementation')
  } catch (exception) {
    console.error(`Failed to post data to ${endpoint} endpoint. Error: ${exception}`)
  }
}

И у меня есть тест для этого:

it('should set configFetched when positive response is returned', async () => {
  const wrapper = shallow(<Component />)
  fetch.mockClear()
  fetch.mockReturnValueOnce(constructSuccessfulResponse(true))

  const fetchButton = wrapper.find(fetchButtonSelector)
  await fetchButton.simulate('click')

  console.log('Here comes the expect...')
  expect(wrapper.state().configFetched).toBeTruthy()
})

const constructSuccessfulResponse = (data) => {
  return Promise.resolve({
      ok: true,
      json: () => data
  })
}

И он проходит с ожидаемым выводом (первый код заканчивается, чем ожидалосьпроверено)

End of implementation
Here comes the expect...

Проблема начинается, когда я раскомментирую 4 строки из первого фрагмента.Тест начинает проваливаться, а вывод меняется на обратный:

Here comes the expect...    
End of implementation

Почему этот конкретный фрагмент кода все меняет?Как я могу это исправить?

Answer 1

Я обошел проблему, поместив секцию ожидания в setTimeout и вызвав готово после того, как это сделано:

it('should set configFetched when positive response is returned', async (done) => {
  const wrapper = shallow(<Component />)
  fetch.mockClear()
  fetch.mockReturnValueOnce(constructSuccessfulResponse(true))

  const fetchButton = wrapper.find(fetchButtonSelector)
  await fetchButton.simulate('click')

  setTimeout(() => {
    expect(wrapper.state().configFetched).toBeTruthy()
    done()
  }, 1)
})

Насколько это зло?