0

再構成を使用して複数の HOC で構成されたメイン コンテナーがあるセットアップがあります。

使用中の HOC は次のとおりです。

WithPageWrapper、WithLoading、WithError

次のように構成されます。

compose(
    withPageWrapper,
    withLoading,
    withError
)(MainContainer)

このロジックをテストすることは困難です。私が取り組んでいるプロジェクトは、react-test-renderer を使用し、浅いレンダリング メソッドを利用しています。

そのため、スナップショットをテストしてエラー状態がロードされていることを確認する場合、スナップショットは 1 レベルの深さのみをテストし (レンダリングが浅いため)、常に次を返します。

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

代わりに、スナップショットで見たいのは次のとおりです。

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

ローディングプロップがnullまたはfalseであるため、ローディングHOCがメインコンテナを単純にレンダリングすることを期待していたからです。

浅いレンダリングの代わりに完全なレンダリングを行うと、スナップショットがほとんど読めなくなります。react-test-renderer で浅いレンダリングを使用して、複数の HOC の構成をテストする方法はありますか?

4

1 に答える 1