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?

Solution 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.

Solution 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.

Solution 3

I think you should try this

    describe('manage profile page test suite', () => {


    it('snapshot test', () => {
        let wrapper = shallow(
            <ManageProfilePage.WrappedComponent/>
        );
      expect(wrapper).toMatchSnapshot();
    })
   }) 

Comments

[Amol Aggarwal]

the problem is shallow rendering is not rendering not even 1 level deep in my case

[Patrick]

I think it is, you don't know what's going on exactly inside the withRouter - something IS being rendered, it's just not what you expect. I still suggest testing your own component and not wrappers

[Amol Aggarwal]

I mean it is not rendering at component level -of course it will render at withRouter level.

[Chris]

Could you provide an example how you do this Patrick? I'm thinking of doing the same but can't figure out the approach exactly

[Patrick]

Hey chris, the best approach is to export your regular component and just run tests on that instead, you're not after testing the react router after all

[ganesh kaspate]

@Patrick could you please look at stackoverflow.com/questions/53845187/…

[Jens Bodal]

Having to export something solely for the purpose of testing seems like an anti-pattern

[Patrick]

@JensBodal - While I generally agree (writing code for the sole purpose of testing is bad), the alternative it set up quite a bit of boiler plate to support testing a redux connected component.

[Prakash P]

How to test queryByText in withrouter component?

[sktguha]

@Patrick one problem I have found in testing redux react connected components by directly exporting the unconnected component is that your mapstatetoprops and mapdispatchtoprops functions are not tested that way. you may have to write seperate tests for them

[Patrick]

@SaikatGuha - True, but those are very simple test. The major downside is that you're not testing everything together.

[sktguha]

@Patrick Yes agreed. The best way is to test the connected components even though that may involve a bit more boilerplate

[Patrick]

@sktguha I'd argue against things like "Best" - For my team (3 years ago) it was much better to test things in separation, as we had a manual QA process as well. Sometimes the unit tests are really complex to test something really simple, that's never a good thing