0

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?

chinds
  • 1,761
  • 4
  • 28
  • 54

1 Answers1

0

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.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • So I still don't quite get this. Would I need to mock each HOC and then do the original shallow render to compare with the snapshot? I guess I am just not sure how mocking would help with the issue of using shallow render – chinds Apr 16 '19 at 08:21
  • The purpose of this is to do full render and get clean and predictable snapshot. – Estus Flask Apr 16 '19 at 08:29