How to test a React component that has Router, Redux and two HOCs… with Jest and Enzyme?

I am currently unable to find a solution to this problem.
I have a React Component that is connected to React Router 4, Redux store and is wrapped by two HOCs. Its pretty crazy, but this is how it was coded.
Here is the export to give you an idea:

export default withFetch(Component)(fetchData, mapStateToProps)

I am trying to run some basic tests on it:

  it('should render self and subcomponents', () => {

    const wrapper = shallow(<Component {...props} />)

    expect(toJson(wrapper)).toMatchSnapshot()

  })

Which outputs a console.log/snapshot of:

<Route render={[Function: render]} />

Things tried but no succeed:

I've tried wrapping my component in the Memory Router

Supply a redux store to the component

Used .dive() and .chilndren() to try and see the children

Tried mount and render with no success.

Still keeps rendering the <Route render={[Function: render]} />

Trying out :

<MemoryRouter>

    <Component {...props} />

</MemoryRouter>

Still produces the same result.
Note that I've also tried importing my component as

import { Component } from './components/'

But it returns undefined.

Any help is deeply appreciated. Thank you! 😊🙏

edited Nov 20 '18 at 6:24

skyboyer

3,44111128

asked May 11 '18 at 4:38

Esther Cuan

1399

add a comment |

export default withFetch(Component)(fetchData, mapStateToProps)

I am trying to run some basic tests on it:

  it('should render self and subcomponents', () => {

    const wrapper = shallow(<Component {...props} />)

    expect(toJson(wrapper)).toMatchSnapshot()

  })

Which outputs a console.log/snapshot of:

<Route render={[Function: render]} />

Things tried but no succeed:

I've tried wrapping my component in the Memory Router

Supply a redux store to the component

Used .dive() and .chilndren() to try and see the children

Tried mount and render with no success.

Still keeps rendering the <Route render={[Function: render]} />

Trying out :

<MemoryRouter>

    <Component {...props} />

</MemoryRouter>

Still produces the same result.
Note that I've also tried importing my component as

import { Component } from './components/'

But it returns undefined.

Any help is deeply appreciated. Thank you! 😊🙏

edited Nov 20 '18 at 6:24

skyboyer

3,44111128

asked May 11 '18 at 4:38

Esther Cuan

1399

add a comment |

export default withFetch(Component)(fetchData, mapStateToProps)

I am trying to run some basic tests on it:

  it('should render self and subcomponents', () => {

    const wrapper = shallow(<Component {...props} />)

    expect(toJson(wrapper)).toMatchSnapshot()

  })

Which outputs a console.log/snapshot of:

<Route render={[Function: render]} />

Things tried but no succeed:

I've tried wrapping my component in the Memory Router

Supply a redux store to the component

Used .dive() and .chilndren() to try and see the children

Tried mount and render with no success.

Still keeps rendering the <Route render={[Function: render]} />

Trying out :

<MemoryRouter>

    <Component {...props} />

</MemoryRouter>

Still produces the same result.
Note that I've also tried importing my component as

import { Component } from './components/'

But it returns undefined.

Any help is deeply appreciated. Thank you! 😊🙏

edited Nov 20 '18 at 6:24

skyboyer

3,44111128

asked May 11 '18 at 4:38

Esther Cuan

1399

export default withFetch(Component)(fetchData, mapStateToProps)

I am trying to run some basic tests on it:

  it('should render self and subcomponents', () => {

    const wrapper = shallow(<Component {...props} />)

    expect(toJson(wrapper)).toMatchSnapshot()

  })

Which outputs a console.log/snapshot of:

<Route render={[Function: render]} />

Things tried but no succeed:

I've tried wrapping my component in the Memory Router

Supply a redux store to the component

Used .dive() and .chilndren() to try and see the children

Tried mount and render with no success.

Still keeps rendering the <Route render={[Function: render]} />

Trying out :

<MemoryRouter>

    <Component {...props} />

</MemoryRouter>

Still produces the same result.
Note that I've also tried importing my component as

import { Component } from './components/'

But it returns undefined.

Any help is deeply appreciated. Thank you! 😊🙏

javascript reactjs redux jestjs enzyme

edited Nov 20 '18 at 6:24

skyboyer

3,44111128

asked May 11 '18 at 4:38

Esther Cuan

1399

edited Nov 20 '18 at 6:24

skyboyer

3,44111128

asked May 11 '18 at 4:38

Esther Cuan

1399

edited Nov 20 '18 at 6:24

skyboyer

3,44111128

edited Nov 20 '18 at 6:24

skyboyer

3,44111128

edited Nov 20 '18 at 6:24

skyboyer

3,44111128

asked May 11 '18 at 4:38

Esther Cuan

1399

asked May 11 '18 at 4:38

Esther Cuan

1399

asked May 11 '18 at 4:38

Esther Cuan

1399

add a comment |

1 Answer
1

active

oldest

votes

I assume that by <Router> you are referring to BrowserRouter.
The best way is to isolate the wrapped component and test it with testing alternatives.

For example assume that you want to test that:

// App.jsx



export const App = () => 

<Router>

  <ReduxProvider>

     <AppInner>

  </ReduxProvider>

</Router>

My suggestion is to test AppInner with testing env of Router & ReduxProvider.

In tests:

// AppInner.test.jsx



import {mount} from 'enzyme';

import {MemoryRouter} from 'react-router';

describe('AppInner', () => {

   it('should do something', () => {

      const TestingComponent = () =>

      <MemoryRouter>

         <ReduxProvider>

            <AppInner />

         <ReduxProvider>

      <MemoryRouter>;

      const component = mount(TestingComponent);

   });

})

Pay attention that I've wrapped the AppInner with MemoryRouter, it allows your mimic router but without the dependency of the browser.

For more info you can read the testing section of react-router;

answered May 11 '18 at 4:54

felixmosh

3,8182517

Note that mount changed the output completely! I was using Shallow.

– Esther Cuan
May 11 '18 at 23:21

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50285084%2fhow-to-test-a-react-component-that-has-router-redux-and-two-hocs-with-jest-a%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I assume that by <Router> you are referring to BrowserRouter.
The best way is to isolate the wrapped component and test it with testing alternatives.

For example assume that you want to test that:

// App.jsx



export const App = () => 

<Router>

  <ReduxProvider>

     <AppInner>

  </ReduxProvider>

</Router>

My suggestion is to test AppInner with testing env of Router & ReduxProvider.

In tests:

// AppInner.test.jsx



import {mount} from 'enzyme';

import {MemoryRouter} from 'react-router';

describe('AppInner', () => {

   it('should do something', () => {

      const TestingComponent = () =>

      <MemoryRouter>

         <ReduxProvider>

            <AppInner />

         <ReduxProvider>

      <MemoryRouter>;

      const component = mount(TestingComponent);

   });

})

Pay attention that I've wrapped the AppInner with MemoryRouter, it allows your mimic router but without the dependency of the browser.

For more info you can read the testing section of react-router;

answered May 11 '18 at 4:54

felixmosh

3,8182517

Note that mount changed the output completely! I was using Shallow.

– Esther Cuan
May 11 '18 at 23:21

add a comment |

I assume that by <Router> you are referring to BrowserRouter.
The best way is to isolate the wrapped component and test it with testing alternatives.

For example assume that you want to test that:

// App.jsx



export const App = () => 

<Router>

  <ReduxProvider>

     <AppInner>

  </ReduxProvider>

</Router>

My suggestion is to test AppInner with testing env of Router & ReduxProvider.

In tests:

// AppInner.test.jsx



import {mount} from 'enzyme';

import {MemoryRouter} from 'react-router';

describe('AppInner', () => {

   it('should do something', () => {

      const TestingComponent = () =>

      <MemoryRouter>

         <ReduxProvider>

            <AppInner />

         <ReduxProvider>

      <MemoryRouter>;

      const component = mount(TestingComponent);

   });

})

Pay attention that I've wrapped the AppInner with MemoryRouter, it allows your mimic router but without the dependency of the browser.

For more info you can read the testing section of react-router;

answered May 11 '18 at 4:54

felixmosh

3,8182517

Note that mount changed the output completely! I was using Shallow.

– Esther Cuan
May 11 '18 at 23:21

add a comment |

I assume that by <Router> you are referring to BrowserRouter.
The best way is to isolate the wrapped component and test it with testing alternatives.

For example assume that you want to test that:

// App.jsx



export const App = () => 

<Router>

  <ReduxProvider>

     <AppInner>

  </ReduxProvider>

</Router>

My suggestion is to test AppInner with testing env of Router & ReduxProvider.

In tests:

// AppInner.test.jsx



import {mount} from 'enzyme';

import {MemoryRouter} from 'react-router';

describe('AppInner', () => {

   it('should do something', () => {

      const TestingComponent = () =>

      <MemoryRouter>

         <ReduxProvider>

            <AppInner />

         <ReduxProvider>

      <MemoryRouter>;

      const component = mount(TestingComponent);

   });

})

Pay attention that I've wrapped the AppInner with MemoryRouter, it allows your mimic router but without the dependency of the browser.

For more info you can read the testing section of react-router;

answered May 11 '18 at 4:54

felixmosh

3,8182517

I assume that by <Router> you are referring to BrowserRouter.
The best way is to isolate the wrapped component and test it with testing alternatives.

For example assume that you want to test that:

// App.jsx



export const App = () => 

<Router>

  <ReduxProvider>

     <AppInner>

  </ReduxProvider>

</Router>

My suggestion is to test AppInner with testing env of Router & ReduxProvider.

In tests:

// AppInner.test.jsx



import {mount} from 'enzyme';

import {MemoryRouter} from 'react-router';

describe('AppInner', () => {

   it('should do something', () => {

      const TestingComponent = () =>

      <MemoryRouter>

         <ReduxProvider>

            <AppInner />

         <ReduxProvider>

      <MemoryRouter>;

      const component = mount(TestingComponent);

   });

})

Pay attention that I've wrapped the AppInner with MemoryRouter, it allows your mimic router but without the dependency of the browser.

For more info you can read the testing section of react-router;

answered May 11 '18 at 4:54

felixmosh

3,8182517

answered May 11 '18 at 4:54

felixmosh

3,8182517

answered May 11 '18 at 4:54

felixmosh

3,8182517

answered May 11 '18 at 4:54

felixmosh

3,8182517

Note that mount changed the output completely! I was using Shallow.

– Esther Cuan
May 11 '18 at 23:21

add a comment |

Note that mount changed the output completely! I was using Shallow.

– Esther Cuan
May 11 '18 at 23:21

Note that mount changed the output completely! I was using Shallow.

– Esther Cuan
May 11 '18 at 23:21

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu