Testing a react component with a connected child component using enzyme mount

2
votes

I'm testing a react component using enzyme mount (because i'm testing it's lifecycle methods). My problem is that my component has a redux connected child component, which is giving me the error:

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

How can I get around this?
Thanks!
Uri

2
reactjstestingreduxreact-reduxenzyme

2 Answers

1
votes

As the error states, you need to provide your component with the store.

Either pass it through props:

const wrapper = mount(<PopupContainer store={store} />)

Or wrap it in a <Provider>:

const wrapper = mount(
    <Provider store={store}>
        <PopupContainer />
    </Provider>
)

Now, if you're using Jest and don't want the wrapped component to interfere with your test, you could mock it:

jest.mock('./Popup', () => 'Popup');
0
votes

No, you don't have to mock the store. Just extract the wrapped component:

const WrappedPopup = Popup.WrappedComponent;

And test it like normal component, with mocked props and actions:

const wrapper = mount(<WrappedPopup connectPropA={...} actionB={...} />);

The wrapped component is a static property the connect added to the wrapper component for accessing the original component.