Тест Jest для обновления setState компонента React из Promise

Question

Учитывая компонент React с именем ListContainer с функцией загрузки данных следующим образом:

loadList() {
    this.setState({loading: true});

    return this.props.api.get({
        sort: this.props.sort.order,
        search: this.props.search.query,
        limit: this.props.pager.limit,
        offset: this.props.pager.offset
    }).then((response: ApiResponse) => {
        this.setState({
            listItems: response.data.records,
            itemCount: response.data.meta.count,
            error: undefined
        })
    }).catch((error: ApiError) => {
        this.setState({
            error: error
        })
    }).then(() => {
        this.setState({
            loading: false
        })
    })
}

Я пытаюсь написать тест, который будет гарантировать, что данные ответа будут записаны в компонентгосударство.

test('loads list items', () => {
        const testApi = {
            get: jest.fn(() => Promise.resolve())
        };

        // Omitting some additional props for brevity.
        wrapper = shallow(<ListContainer api={testApi}/>);

        const testItems = [
            'Test Item 1',
            'Test Item 2',
        ];

        testApi.get.mockImplementationOnce(() =>
            Promise.resolve({
                data: {records: testItems}
            })
        );

        return wrapper.instance().loadList()
            .then(() => {
                expect(wrapper.update().state().listItems).toBe(testItems)
            });
    })

Я вижу, что мой макет правильно возвращает тестовые данные (через console.log(response) в функции loadList), но тест по-прежнему не проходит.Как я могу убедиться, что setState завершено, прежде чем подтвердить свои ожидания?

Answer 1

Ты рядом!

Вам просто нужно добавить .data.meta.count к вашему макету ответа, сейчас код в итоге выдает ошибку, поскольку он не включен в текущий макет.

Просто измените свой макет на это:

testApi.get.mockImplementationOnce(() =>
  Promise.resolve({
    data: {
      records: testItems,
      meta: { count: 2 }  // <= include .data.meta.count
    }
  })
);

... и это должно это исправить!