Реагировать состояние компонента не обновляется в модульном тесте Jest

Question

У меня есть простая форма в качестве компонента React. После нажатия кнопки вызывается handleSubmit (), который выполняет обратный вызов и очищает форму, если вызов был успешным. Я попытался сделать юнит-тест Jest, который проверяет, очищается ли форма после отправки.

    it('handles form submission', () => {
        Amplify.API.post = jest.fn().mockImplementation(() => Promise.resolve());
        EventEmitter.emit = jest.fn().mockImplementation(() => Promise.resolve());
        wrapper.setState({
            diocese: {
                name: 'My New Diocese',
                id: '123',
                generalCollectionOnly: false,
                aggregatePayments: false,
                aggregatePledges: false,
            },
        });
        footer.children().find(Button).at(1)
            .simulate('click');
        expect(wrapper.state().diocese.name).toEqual('');
    });

После отладки я вижу, что форма успешно отправлена ​​и вызывает this.setState ():

            this.setState(() => ({
                diocese: {
                    id: '',
                    name: '',
                    generalCollectionOnly: false,
                    aggregatePledges: false,
                    aggregatePayments: false,
                },
                isLoading: false,
            }));

Тем не менее, оператор wait не выполняется, потому что в имени по-прежнему отображается «Моя новая епархия», хотя его следует очистить. Проведя некоторые исследования, я подумал, что обновление обертки поможет:

wrapper.update();

Однако это все еще показывает, что состояние компонента не было очищено. Почему состояние не обновляется в тесте?

Answer 1

Спасибо за отзыв.Проблема была вызвана handleSubmit (), выполняющей асинхронную работу.Добавление ожидания в модульном тесте Jest устранило проблему.Вот как выглядит тест:

        it('handles form submission', async () => {
        Amplify.API.post = jest.fn().mockImplementation(() => Promise.resolve());
        EventEmitter.emit = jest.fn().mockImplementation(() => Promise.resolve());
        wrapper.setState({
            diocese: {
                name: 'My New Diocese',
                id: '123',
                generalCollectionOnly: false,
                aggregatePayments: false,
                aggregatePledges: false,
            },
        });
        await footer.children().find(Button).at(1)
            .simulate('click');
        expect(wrapper.state().diocese.name).toEqual('');
    });

Тест проходит успешно.

Answer 2

Вот пример теста, который я писал с Jest и Enzyme: Вам не нужно устанавливать setState, просто передайте оболочке компонента макетируемый объект, такой как « values ​​» в моем примере.Затем вы должны знать, как и какой компонент будет отображаться на основе свойств и значений в объекте " values ​​", которые вы передаете.

it('Get Awerage Daily Wage label - Calculated', () => {
    const values = {
      wageEntryMethod: 'Calculated',
      grossWages: 45000,
      totalCommissioning: 4000,
      totalMileage: 1000,
      otherWages: 2000,
      totalDaysPaid: 220,
    }
    const wrapper = shallow(<AwerageDailyComponent values={values} />)
    expect(wrapper.find('label').text()).toEqual(
      '13. Average Daily Wage (([7]$45,000.00 + [9]$4,000.00 + [11]$1,000.00 + [12]$2,000.00) / [8]220):'
    )-
  })