Как заставить Jest ждать завершения выполнения всего асинхронного кода, прежде чем ожидать утверждения

Вот фрагмент, который ждет, пока ожидающие обещания не будут разрешены:

const flushPromises = () => new Promise(setImmediate);

Обратите внимание, что setImmediate - нестандартная функция (и не ожидается, что он станет стандартом). Но если этого достаточно для вашей тестовой среды, это должно быть хорошим решением. Его описание:

Этот метод используется для прерывания длительных операций и запуска функции обратного вызова сразу после того, как браузер завершил другие операции, такие как события и обновления отображения.

Вот примерно как использовать его с помощью async / await:

it('is an example using flushPromises', async () => {
    const wrapper = mount(<App/>);
    await flushPromises();
    wrapper.update(); // In my experience, Enzyme didn't always facilitate component updates based on state changes resulting from Promises -- hence this forced re-render

    // make assertions 
});

Я много использовал это в этом проекте, если вы хотите, чтобы кто-то работал реально. мировые примеры.

Я предлагаю вам экспортировать aThingThatReturnsAPromise() из его модуля или файла, а затем импортировать его в свой тестовый пример.

Поскольку aThingThatReturnsAPromise() возвращает обещание, вы можете использовать функции асинхронного тестирования Jest. Jest будет ждать выполнения вашего обещания, а затем вы сможете делать свои утверждения.

describe('When rendering Parent', () => {
    var parent;

    beforeAll(() => {
        parent = mount(<Parent />)
    });

    it('should display Child with response of the service', () => {
        expect.assertions(1);

        return aThingThatReturnsAPromise().then( () => {
            expect(parent.html()).toMatch('fakeReturnValue');
        });
    });
});

Дополнительные сведения см. В здесь Jest Docs, как Jest обрабатывает тестовые случаи с помощью обещаний.

Я ничего не знаю о React, чтобы выполнить то, что вы ищете.

Однако мне удалось сделать это в аналогичном коде, вызвав доAll () @done после завершения установки. Смотрите изменения в вашем коде ниже:

let setupComplete;
jest.mock('eternalService', () => {
    return jest.fn(() => {
        return { doSomething: jest.fn((cb) => { cb('fakeReturnValue'); setupComplete(); }) };
});
.
.
.
    beforeAll(done => {
        parent = mount(<Parent />)
        setupComplete = done;
    });
});

Я никогда ими не пользовался, но потенциальный интерес представляет runAllTicks и runAllImmediates.

в то время как псевдокод можно реорганизовать, чтобы он соответствовал жизненному циклу React (используя componentWillMount() componentDidMount(), было бы намного проще протестировать. Однако ниже мой непроверенный псевдокод для изменений для ваших тестовых кодов, не стесняйтесь тестировать и обновлять его. Надеюсь, это вам поможет!

describe('When rendering Parent', () => {
    it('should display Child with the response of the service', function(done) => {
        const parent = mount(<Parent />);
        expect(parent.html()).toMatch('fakeReturnValue');
        done();
    });
});

В качестве альтернативы некоторым методам, перечисленным в других ответах, вы также можете использовать модуль npm flush -обещания. Ниже показан образец набора тестов с двумя тестами (также как и по указанному URL-адресу):

const flushPromises = require('flush-promises');

describe('Async Promise Test Suite', () => {

    it('A test involving flushPromises', async () => {
        const wrapper = mount(<App/>);
        await flushPromises();
        // more code
    });

    it('Will not work correctly without flushing promises', async () => {
        let a;
        let b;

        Promise.resolve().then(() => {
            a = 1;
        }).then(() => {
            b = 2;
        })

        await flushPromises();

        expect(a).toBe(1);
        expect(b).toBe(2);

    });

});