Обертывание async moxios call in act callback - PullRequest
0 голосов
/ 05 июня 2019

Я пытаюсь протестировать функциональный компонент с помощью хуков.Хук useEffect вызывает API-интерфейс третьей части, который затем возвращает setState по возвращении.

У меня работает тест, но я получаю предупреждение о том, что обновление компонента не было упаковано в действии.

Проблема, с которой я столкнулся, заключается в том, что ожидание находится внутри обещания moxios.wait, и поэтому я не могу обернуть его в функцию act и затем утверждать результат этого.

Тест пройден, но я не знаю обтеканиякод, который обновляет состояние в функции действия, может привести к ложным срабатываниям или обнаруженным ошибкам.Мне просто интересно, как я должен это тестировать.

Я пытался использовать новую функцию async await act в альфа-версии response 16.9.0, а также многочисленные предложения, которые я нашел во многих проблемах github.вроде jest setTimers, и, похоже, никто не решает проблему.

Компонент

 const Benefits = props => {
  const [benefits, setBenefits] = useState([])
  const [editing, setEditing] = useState(false)
  const [editingBenefit, setEditingBenefit] = useState({id: null, name: '', category: ''})

  useEffect(() => {
    axios.get('#someurl')
      .then(response => {
        setBenefits(response.data)
    })
  }, [])
}

Тест

describe('Benefits', () => {
  it('fetches the list of benefits from an api and populates the benefits table', (done) => {
    const { rerender } = render(<Benefits />)
    moxios.wait(() => {
      const request = moxios.requests.mostRecent()
      request.respondWith({
        status: 200,
        response: benefits
      }).then(() => {
        expect(document.querySelectorAll('tbody > tr').length).toBe(2)
        done()
      })
    })
  })
})

Тест пройден, но я получаю следующее предупреждение

Предупреждение. Обновление Преимуществ в тесте не было включено в действие (...).

При тестировании код, вызывающий обновления состояния React, должен быть включен в действие (...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser.
    in Benefits (at benefits.spec.js:28)
...