Тестирование запроса на выборку с Jest и Enzyme

Question

Я начал учиться тестировать приложения React, теперь я хочу протестировать запрос на выборку, мне это удалось, похоже, он работает, но как правильно это сделать, вот моя попытка:

const fetchSpy = jest.spyOn(global, 'fetch')
        .mockImplementation(() => Promise.resolve({
            json: () => ([{ id: 0, title: "Title", body: "Body", userId: 1 }]),
        }));

    let wrapper = await shallow(<Posts />);

    expect(fetchSpy).toHaveBeenCalled();

    setTimeout(async () => {
        await wrapper.update()
        expect(wrapper.state('posts').length).toEqual(1)
    })

А также, что было бы лучшим способом ожидания обновления компонента вместо setTimeout?

Answer 1

Не только setTimeout помогает, но Promise.resolve() также помещает некоторый код в конец очереди.Так как с Promise мы можем использовать await и сообщить Jest, что мы делаем что-то асинхронное, это может быть более понятно:

test('testing something', async () => {
    let wrapper = shallow(<Posts />); 
    await Promise.resolve(); 
    /* everything below is put in the end of the queue 
     - so after mocked fetch() has resolved and response processed */
    expect(fetchSpy).toHaveBeenCalled();
    // wrapper.update(); // it is not required
    expect(wrapper).toMatchSnapshot();
});

Ваш await shallow(...) делает то же самое: помещает все ниже в концеочередь (как если бы это было Promise.resolve(shallow(<Posts />)).then(<code below>)).Но я считаю, что await Promise.resolve() менее запутанно, потому что выглядит (удивительно!) Действительно нетипично :) Так что никто не может подумать, что вы (неправильно) полагаетесь на shallow() возвращает Promise (а это не так).

Jest не имеет функции , такой как "обещание сброса"..runAllTimers() работает только с setTimeout / setInterval и фактически не делает их синхронизированными, а скорее ускоряет их (и они все еще являются асинхронными).

[UPD] вам даже не нужно wrapper.update() если вы подождете, пока все асинхронные задачи не будут выполнены.По крайней мере, у меня это нормально работает на codesandbox.io без wrapper.update()