Testing react component enclosed in withRouter (preferably using jest/enzyme)

Question

I have a React component which is enclosed within Higher Order Component withRouter as below:

module.exports = withRouter(ManageProfilePage); 

My routes are as below:

<Route path="/" component={AdrApp}>     <IndexRoute component={Login}/>     <Route component={CheckLoginStatus}>         <Route path="manage-profiles/:profileId" component=         {ManageProfilesPage}/>      </Route>     <Route path="*" component={notFoundPage}/> </Route> 

I need to use once of the Router lifecycle methods, that is why I need withRouter:

class ManageProfilePage extends React.Component {     componentDidMount() {     this.props.router.setRouteLeaveHook(this.props.route, () => {       ...     })     render(){     ...      } } 

I need to test this component using Jest/Enzyme and I wrote the test case as below:

describe('manage profile page test suite', () => {       it('snapshot test', () => {          const setRouteLeaveHook =jest.fn();          let wrapper = shallow(             <ManageProfilePage params={{id : 25, router:          setRouteLeaveHook}}/>         );       expect(wrapper).toMatchSnapshot();     })    })  

The issue is it is not rendering one level deep. I am pasting the snapshot below:

exports[`manage drug term page test suites snapshot test 1`] = ` <ManageProfilePage   params={     Object {       "id": 25,       "router": [Function],     }   } /> `; 

Is there any different way I can write my test case so that I am able to render ManageProfilePage atleast 1 level deep? It is not able to render as it is enclosed within WithRouter? How do we test these type of components?

Answer 1

Normally if we try to test such components we won’t be able to render it as it is wrapped within WithRouter (WithRouter is a wrapper over a component which provides Router props like match, route and history to be directly used within the component). module.exports = withRouter(ManageProfilePage);

To render such components, we have to explicitly tell it to render the wrapped component using WrappedComponent keyword. For Eg. we will use below code for snapshot test:

describe('manage profile page test suite', () => {       it('snapshot test', () => {          const setRouteLeaveHook =jest.fn();          let wrapper = shallow(             <ManageProfilePage.WrappedComponent params={{id : 25, router:          setRouteLeaveHook}}/>         );       expect(wrapper).toMatchSnapshot();     })    })  

This will tell enzyme to do shallow rendering (Shallow Rendering renders only that particular component and skips child components) for ManageProfilePage which is wrapped component within WithRouter.

Answer 2

Shallow rendering will only render one level, that's part of the specs for it.

you can use Mount which will render the whole tree, but I don't think you can limit how many levels deep it will render.

In any case, when using High Order Components I usually just export the base component as well(before wrapping it), this way I can do all my tests without the wrapper, and simply pass mocks for the required providers.

same thing with a Connect component with redux, you export your regular component and test the different props on that, instead of the connected one.

also note that some with... wrappers do not expose the inner instance(some do, but some don't) , so testing on your own component instead of the wrapper helps there as well.