Testing a reactive component enclosed in a Router (preferably using a joke / enzyme)

Question

I have a React component that is wrapped in a higher order component with a router, as shown below:

module.exports = withRouter(ManageProfilePage); 

My routes are as follows:

 <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 from the router lifecycle methods, so I need to use Router:

 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 a test case as shown 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 problem is that it does not provide a deep level. I am inserting a snapshot below:

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

Is there any other way to write my test case so that I can visualize ManageProfilePage at least at level 1? It cannot display because it is enclosed inside WithRouter? How do we test these types of components?

Answer 1

Usually, if we try to test such components, we won’t be able to display them, since they are wrapped inside WithRouter (WithRouter is the shell above the component that provides the details of the router, such as match, route and history, will be used directly in the component). module.exports = withRouter (ManageProfilePage);

In order to display such components, we must explicitly indicate that it displays the wrapped component using the WrappedComponent keyword. E.g. we will use the code below for a snapshot:

 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 tells the enzyme to do small rendering (Shallow Rendering only displays that particular component and skips the child components) for ManageProfilePage, which is a wrapped component inside WithRouter.

Answer 2

Negative rendering will display only one level, this part of the specifications for it.

you can use the mount, which will display the entire tree, but I do not think that you can limit the number of levels that it will render.

In any case, when using high-order components, I usually just export the base component (before packing it), so I can run all my tests without a shell and just pass the mockups to the required vendors.

the same with the Connect component with the abbreviation, you export your regular component and test different attributes on this, and not on the connected one.

also note that some with... wrappers do not display the internal instance (some do and some do not), so testing on your own component instead of the shell also helps.

Answer 3

What I did to fix the problem:

"This.props.match.params.id" uses the post component

In test case

  const miniProps = {
     otherProps,
     match: {params: {id: '112'}}
 };

 const wrapper = shallow ();