How to test a component with a nested container with React and Redux?

Question

Due to the complexity of the application I am working on I have decided on using a nested redux container rather than passing an action as a prop down to the child components. However, this has proved to be problematic for unit testing when rendering the OuterContainer with jsdom in combination with mocha, chai and sinon.

Here is a contrived example of the view structure:

<OuterContainer>
  <div>
    <InnerContainer />
  </div>
</OuterContainer>

where OuterContainer & InnerContainer are wrapped with connect. e.g.:

export connect(<mapStateToProps>)(<Component>)

When running tests the error I am getting is: Invariant Violation: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a `<Provider>`, or explicitly pass "store" as a prop to "Connect(Component)".

Is there a way to unwrap or stub the InnerContainer for unit testing without having to use shallow rendering?

Dan Abramov · Accepted Answer · 2016-03-23 13:42:30Z

24

Wrap your component in <Provider> when testing. It’s up to you whether to supply a real store or a mock with { dispatch, getState, subscribe } to it. Wrapping the outermost component in <Provider store={store}> will also make the store available to the child components at any level of nesting—just like in the app itself.

const store = createStore(reducer) // can also be a mock
ReactTestUtils.renderIntoDocument(
  <Provider store={store}>
    <OuterContainer />
  </Provider>
)

answered Mar 23, 2016 at 13:42

Dan Abramov

269k87 gold badges417 silver badges523 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jon Yardley Over a year ago

Great! Thanks for the advice. Giving this a go now :)

Jon Yardley Over a year ago

Works like a charm. Thanks again @DanAbramov !

publicJorn Over a year ago

@dan-abramov: this works. However, it's not really a unit test anymore. Enzyme has shallow, but it still goes deep with a connected child component. Do you have any idea if it's possible to just test if <InnerContainer /> is there without rendering it?

csvan Over a year ago

I echo @publicJorn concern. I like this solution myself, but it makes the tests way more complex than they should be.

sospedra · Accepted Answer · 2017-03-03 20:58:17Z

0

Another approach is to export both the component to be connected and the container. The container as default, of course.

export const Comp = (props) => (<p>Whatever</p>)
export default connect(...)(Comp)

Hence, you can unit test Comp.

answered Mar 3, 2017 at 20:58

sospedra

15k3 gold badges24 silver badges32 bronze badges

3 Comments

shobhit1 Over a year ago

But this defeats the purpose of testing the component with complete Redux linkage. Won't it?

sospedra Over a year ago

@shobhit1 but then you're testing your component and connect which is already tested by react-redux. Is not bad, neither good. You're just overtesting then.

csvan Over a year ago

This will not work if, as in the question, Comp itself imports and uses another container. The subcontainer will then expect store to be present, and the test will fail.

type_master_flex · Accepted Answer · 2018-03-01 00:35:10Z

Not sure if this is what your problem is, but I'm sure this will probably help a few people out there looking at this feed.

I had the same error and it was a simple fix:

I had forgotten to pass my component my store object in my entry file (using webpack).

I just added an attribute to the Root component "store={store}" see below:

    document.addEventListener("DOMContentLoaded", () => {
      const store = configureStore();
       ReactDOM.render(<Root store={store} />, 
     document.getElementById('content'));
    });

This was my root file code for reference as well:

    import React from 'react';
    import { Provider } from 'react-redux';
    import App from './app';

    const Root = ({ store }) => (
     <Provider store={ store }>
        <App />
     </Provider>
    );

export default Root;

Hope that helps someone!

Rahul Gaba · Accepted Answer · 2018-03-04 13:39:22Z

0

Mock the Provider component to return the child component.

Add this before describe().

jest.mock('Provider', () => ({children}) => children);

answered Mar 4, 2018 at 13:39

Rahul Gaba

4804 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to test a component with a nested container with React and Redux?

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related