Detuned Detuned - 2 months ago 61
React JSX Question

Nested components testing with Enzyme inside of React & Redux

So, I have a component

SampleComponent
that has mounts another
connected component
(i.e.
container
). When I try to test
SampleComponent
by
mounting
(since I need the
componentDidMount
), I get the error:

Invariant Violation: Could not find "store" in either the context or props of "Connect(ContainerComponent)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(ContainerComponent)".


What's the best way of testing this?

Answer

What I essentially did was bring in my redux store (and Provider) and wrapped it in a utility component as follows:

export const CustomProvider = ({ children }) => {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  );
};

then, I mount the SampleComponent and run tests against it:

it('contains <ChildComponent/> Component', () => {
  const wrapper = mount(
    <CustomProvider>
      <SampleComponent {...defaultProps} />
    </CustomProvider>
  );
  expect(wrapper.find(ChildComponent)).to.have.length(1);
});
Comments