тестирование нескольких HOC, составленных с перекомпоновкой

Question

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

HOC используются;

WithPageWrapper, WithLoading, WithError

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

compose(
    withPageWrapper,
    withLoading,
    withError
)(MainContainer)

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

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

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

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

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

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

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

Answer 1

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

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

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

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