Как протестировать обернутый компонент с помощью enzyme?

#javascript #reactjs #jestjs #enzyme

Вопрос:

Мои компоненты React обернуты разными HOC (i18next, graphql и т.д.), К сожалению, я не могу протестировать свои обернутые компоненты с помощью enzyme.

Как вы лучше всего тестируете свои обернутые компоненты?

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

Спасибо, что читаете меня!

1. Большинство хорошо разработанных HOC предоставляют исходные компоненты, как показано в одном из ответов. Это хорошая практика для экспорта и тестирования развернутых компонентов на случай, если они не отображаются.

2. Я думаю, это зависит от того, как вы организуете свои HOC. Если вы склонны использовать только один, т.е. connect или graphql , то может быть достаточно предоставить обернутый компонент в качестве статического элемента. Однако, если вы используете библиотеки, подобные recompose , которые предпочитают составлять из нескольких более мелких HOC, тогда вы могли бы получить HoC.WrappedComponent.WrappedComponent.WrappedComponent и т.д. В этом случае я думаю, что нет ничего плохого и в экспорте «базового» компонента.

Ответ №1:

Я склоняюсь к тому же подходу, который использует Redux с connect , и делаю фактический компонент доступным как статический для экспортируемого компонента.

 const MyComponent = (props) => ( ... );

const ConnectedComponent = usingMyHoc(...)(MyComponent) ;
ConnectedComponent.WrappedComponent = MyComponent;

export default ConnectedComponent;

Ответ №2:

Я согласен, что экспорт развернутых компонентов выглядит неестественно — вы хотите протестировать свои компоненты именно так, как они используются в производстве.

Мой предпочтительный метод — создание обернутой функции рендеринга для использования в тестировании:

 function renderWithProviders(componentTree, options = {}) {
    const {initialState} = options;
    const store = initializeStore(initialState);
    return {
        ...render(
    <Provider store={store}>
        <SnackbarProvider>{componentTree}</SnackbarProvider>
    </Provider>
    )};
}