Invariant violation: Could not find "store" in either the context or props of "connect(MyComponent)". Either wrap the root component in a Provider or explicitly pass store as a prop to connect(MyComponent)"

So, you’re writing a unit test for one of your Redux connected components.

What does this error say?

It’s saying your connected component cannot be rendered without a store.

So, if your current call to shallow is like this:

const wrapper = shallow(<ConnectedComponent />);

.. it means you’re not passing a store, and instead you should write it like this:

// wrap the root component in a Provider
import Provider from 'react-redux';

const wrapper = shallow(
    <Provider store={store}>
        <ConnectedComponent />
    </Provider>
);
// or pass store as a prop to connect(Component)"
const wrapper = shallow(
    <ConnectedComponent store={store} />
);

But why are you really seeing this error?

Usually, even if you do pass in a store as the error message suggests, you’ll still be stuck. Testing nested components is known to be a pain.

Are you actually trying to test just the inner component?

Common examples of this:

  • you want to access functions from the inner component
  • you want to test componentWillMount, componentWillReceiveProps
  • you want to find elements inside the inner component (e.g. wrapper.find('.button'))

If yes, then you are better off just exporting the inner component as well and testing that directly.

// Export inner component as named export
export const MyComponent = () => (<div>Your component</div>);
// Export connected component as default
export default connect(null,null)(MyComponent);
// In your tests, import the inner component
import { MyComponent } from './myComponent.js';
// In your app, import the container
import MyComponent from './myComponent.js'; 

This way, you’re focusing on testing the logic of your own component, instead of testing Redux’s code. And you no longer need to setup stores and providers - you just pass in the plain props that you need.

Are you indeed intending to test the container component?

Common examples of this:

  • you are shallow rendering the <ConnectedComponent/>
  • you just want to check the correct action is dispatched when a certain prop is called

If yes, fixing the actual issues described in the error message should be enough. You can see a sample code of shallow rendering a container in one of my previous articles.

However, there’s one situation where your code might still not work and that is if you use .dive().

// Check that the correct action is dispatched on a given event
const wrapper = shallow(
    <Provider store={store}>
        <ConnectedComponent />
    </Provider>
);
wrapper.dive().simulate('click');
const actions = store.getActions();
expect(actions).toEqual([ { type: 'SOME_ACTION' } ]);

This is actually a bug in Enzyme (see this Github issue and the discussion over here) which causes the context to not be passed in the child when calling .dive() . The workaround is to pass the store manually in the context of the dive call:

wrapper.dive({ context: { store }).simulate('click');

Let me know if this worked for you!

I hope these tips got you back to writing code! 🚢

If you’re still stuck, drop me a comment below and I’ll do my best to help!

Comments