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

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

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

С помощью PageWrapper, с загрузкой, с ошибкой

Состоит так:

compose(
    withPageWrapper,
    withLoading,
    withError
)(MainContainer)

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

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

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

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

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

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

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


reactjs snapshot react-test-renderer recompose
person chinds    schedule 16.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

person Estus Flask    schedule 16.04.2019
comment
Так что я все еще не совсем понимаю это. Нужно ли будет имитировать каждый HOC, а затем выполнять исходный поверхностный рендеринг для сравнения со снимком? Думаю, я просто не уверен, как насмешка поможет решить проблему использования мелкого рендеринга. - person chinds; 16.04.2019
comment
Целью этого является полный рендеринг и получение чистого и предсказуемого снимка. - person Estus Flask; 16.04.2019