JestJS -> Invariant Violation: Could not find “store” in either the context or props of “Connect(Portfolio)”

Question

The full error message:

Invariant Violation: Could not find \"store\" in either the context or props of \"Connect(Portfolio)\". Either wrap the root

Answer 1

I ran into same issue, here is how I fixed it: As the official docs of redux suggest, better to export the unconnected component as well.

In order to be able to test the App component itself without having to deal with the decorator, we recommend you to also export the undecorated component:

import { connect } from 'react-redux'

 

// Use named export for unconnected component (for tests)
export class App extends Component { /* ... */ }
 
// Use default export for the connected component (for app)
export default connect(mapStateToProps)(App)

Since the default export is still the decorated component, the import statement pictured above will work as before so you won't have to change your application code. However, you can now import the undecorated App components in your test file like this:

// Note the curly braces: grab the named export instead of default export
import { App } from './App'

And if you need both:

import ConnectedApp, { App } from './App'

In the app itself, you would still import it normally:

import App from './App'

You would only use the named export for tests.

Answer 2

Per the error message, you need to make sure that tests for a connected component can actually access a store instance. So, in your test code, you should also use <Provider store={store}><ConnectedPortfolio /></Provider>, or <ConnectedPortfolio store={store} />. Or, you can export your plain Portfolio component separately, and test that, not the connected version.

See the Redux docs on testing for more info, as well as the articles on Redux testing approaches in my React/Redux links list.