Проверка реагирующего компонента после изменения состояния

Question

Как я могу протестировать следующий компонент?

    import React from "react";

    class ModuleLoader extends React.Component {
            state = {
                    Module: null
            };
            componentDidMount() {
                    this.props
                            .Module()
                            .then(loaded => {
                                    this.setState({ Module: loaded.default });
                            })
            }
            render() {
                    if (this.state.error) {
                            return "error";
                    }
                    if (!this.state.Module) {
                            return "loading";
                    }
                    return <this.state.Module {...this.props} />;
            }
    }

    export default ModuleLoader;

Модуль поддержки - это функция, которая возвращает обещание с динамическим импортом.Когда этот импорт разрешен и загружен, он возвращает один реагирующий компонент, который должен быть сохранен в состоянии и обработан.Итак, как должен выглядеть тест, чтобы разрешить компоненту разрешить сетевой запрос, загрузить его, отобразить, а после того, как он будет обработан, проверить утверждение?

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

Я использую Meteor, Mocha и Enzyme.Если невозможно проверить компонент с помощью Enzyme, я могу переключиться на альтернативу.

Спасибо.

Answer 1

Решение в правильном использовании обещаний и await.

it('renders', async () => {
  const props = {
    Module: () =>
      Promise.resolve({
        default: () => <span>Im loaded!</span>,
      }),
  };
  const component = mount(<ModuleLoader {...props} />);
  expect(component).toMatchSnapshot();
  await Promise.resolve(); // tick so promises resolve
  expect(component.update()).toMatchSnapshot();
});

Источник: https://gist.github.com/danielhusar/8df72f5677ec69cb9774c1d5c561c56a

Answer 2

Почему невозможно достичь желаемого поведения с помощью фермента?Разве ваш componentDidMount () не вызывается при мелкой визуализации?Если это так, вы можете попробовать выполнить полный рендеринг (https://github.com/airbnb/enzyme#full-dom-rendering)) или создать вспомогательный метод, который вызывается из componentDidMount (), но также может вызываться вручную в модульном тесте. Затем, дождавшись этого метода, вы можете проверить, чторендеринг компонента содержит Module. Итак, я думаю, у вас есть два варианта, как проверить этот компонент рендеринга Module.