#2282·enzyme

Issue with shallow testing component handling redux hooks

Author: CYB3RL1F3Created Nov 4, 2019Updated Nov 22, 2022

Hello,

I have an issue concerning shallowing component with redux provider.

I'm using a useSelector hook from "react-redux", but this one seems not being able to reach the redux context despite this one to be mounted in the wrappingComponent option of shallow.

Here's my code:

import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { shallow, mount } from 'enzyme';

const mockStore = configureStore([]);
store = mockStore({
   data
});

const wrapper = shallow(<Component />, {
            wrappingComponent: Provider,
            wrappingComponentProps: { store }
        })

I also tried this solution, not working either:

const wrapper = shallow(<Component />, {
            wrappingComponent: ({ children }) => (
                <Provider store={store} children={children} />
            )
        })

And I'm getting the following error:

Invariant Violation: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

I also tried to dive() the shallowed provider. Same issue.

I think the problem is in the library, cause the lone solution found (and working) is mounting... But I try to avoid mounting for performance reasons. I'm asking here because I don't know if I have to ask enzyme or react-redux but in my opinion, since it's the test issue, asking here seems being pertinent, maybe I'm wrong...

I'm using enzyme-adapter-react-16 as well.

Would you have a solution or will you publish a fix for this?

Thanks :)