Блог

У меня есть настройка, в которой у меня есть основной контейнер, состоящий из нескольких HOC с использованием recompose.

Используемые HOC;

WithPageWrapper, с загрузкой, с ошибкой

Составлено так:

 compose(
    withPageWrapper,
    withLoading,
    withError
)(MainContainer)
 

тестирование этой логики оказывается сложным. Проект, над которым я работаю, использует react-test-renderer и использует метод мелкого рендеринга.

Поэтому при тестировании моментального снимка, чтобы убедиться, что загружается состояние ошибки, моментальный снимок проверяет только один уровень глубины (из-за мелкого рендеринга) и всегда возвращает:

 <PageWrapper>
    <LoadingContainer>
    </LoadingContainer>
</PageWrapper>
 

Вместо этого я хочу видеть в моментальном снимке:

 <PageWrapper>
    <ErrorContainer>
    </ErrorContainer>
</PageWrapper>
 

как я и ожидал, Loading HOC просто отобразит основной контейнер, поскольку загрузочный реквизит равен null или false.

Выполнение полного рендеринга вместо мелкого рендеринга просто делает снимок почти нечитаемым. Есть ли способ использовать мелкий рендеринг в react-test-renderer и протестировать состав нескольких HOC?

Все используемые специальные функции могут быть смоделированы с помощью некоторой базовой реализации, такой как

 jest.fn().mockImplementation(Comp => props => (
  <div data-testid="FooHOC"><Comp ...props/></div>
));
 

это позволяет эффективно утверждать результаты в моментальном снимке.

Эффекты оригинальных функций HOC можно протестировать в специальных тестах.