Я пишу интеграционный тест для приложения React, т.е. Тест, который тестирует многие компоненты вместе, и я хочу издеваться над любыми вызовами внешних служб.
Проблема заключается в том, что тест, похоже, выполняется до того, как выполняется асинхронный обратный вызов, что приведет к сбою моих тестов.
Во всяком случае, вокруг? Могу ли я как-то дождаться завершения вызова асинхронного кода?
Вот какой-то плохой псевдокод, чтобы проиллюстрировать мою точку зрения.
Я хотел бы проверить, что, когда я монтирую Parent, его дочерний компонент визуализирует содержимое, возвращаемое с внешней службы, которое я буду издеваться.
class Parent extends component
{
render ()
{
<div>
<Child />
</div>
}
}
class Child extends component
{
DoStuff()
{
aThingThatReturnsAPromise().then((result) => {
Store.Result = result
})
}
render()
{
DoStuff()
return(<div>{Store.Result}</div>)
}
}
function aThingThatReturnsAPromise()
{
return new Promise(resolve =>{
eternalService.doSomething(function callback(result) {
resolve(result)
}
}
}
Когда я это делаю в своем тесте, он терпит неудачу, потому что он запускается до того, как обратный вызов будет запущен.
jest.mock('eternalService', () => {
return jest.fn(() => {
return { doSomething: jest.fn((cb) => cb('fakeReturnValue');
});
});
describe('When rendering Parent', () => {
var parent;
beforeAll(() => {
parent = mount(<Parent />)
});
it('should display Child with response of the service', () => {
expect(parent.html()).toMatch('fakeReturnValue')
});
});
Как проверить это? Я понимаю, что угловой разрешает это с помощью zonejs, есть ли эквивалентный подход в React?