Я пытаюсь протестировать функциональный компонент с помощью хуков.Хук 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)