简体   繁体   中英

testing multiple HOC composed with recompose

I have a setup where I have a main container that is composed with multiple HOC using recompose.

The HOC in use are;

WithPageWrapper, WithLoading, WithError

Composed like this:

compose(
    withPageWrapper,
    withLoading,
    withError
)(MainContainer)

testing this logic is proving difficult. The project I am working on is using react-test-renderer and utilising the shallow render method.

So when testing a snapshot to make sure the error state is loading the snapshot only tests one level deep (due to the shallow render) and always returns:

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

Instead what i want to be seeing in the snapshot is:

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

as I would have expected the Loading HOC to simply render the main container as the loading prop is null or false.

Doing a full render instead of shallow render simply makes the snapshot near unreadable. Is there a way to use shallow render in react-test-renderer and test the composition of multiple HOC?

All HOC functions in use can be mocked with some basic implementation like

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

that allows to efficiently assert results in a snapshot.

The effects of original HOC functions can be tested in dedicated tests.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM