When we put together a react-redux application we should expect to see a structure where at the top we have the Provider
tag which has an instance of a redux store.
That Provider
tag then renders your parent component, lets call it the App
component which in turn renders every other component inside the application.
Here is the key part, when we wrap a component with the connect()
function, that connect()
function expects to see some parent component within the hierarchy that has the Provider
tag.
So the instance you put the connect()
function in there, it will look up the hierarchy and try to find the Provider
.
Thats what you want to have happen, but in your test environment that flow is breaking down.
Why?
Why?
When we go back over to the assumed sportsDatabase test file, you must be the sportsDatabase component by itself and then trying to render that component by itself in isolation.
So essentially what you are doing inside that test file is just taking that component and just throwing it off in the wild and it has no ties to any Provider
or store above it and thats why you are seeing this message.
There is not store or Provider
tag in the context or prop of that component and so the component throws an error because it want to see a Provider
tag or store in its parent hierarchy.
So that’s what that error means.