Enzyme: Shallow not working with react-redux v7.x

[sunnyofhell]

After upgrading to react-redux 7.x from react-redux 5.x, test cases that were written started to fail. Initially the below code used to work

const wrapper = shallow(<SomeConnectedComponent />, {context: { store }});

Breaking changes made to react-redux v6.x cause it to fail.

It is suggested to wrap the component to test inside a redux and then render it.

This works with mount but not shallow

Current behavior

import { Provider } from 'react-redux';

const wrapper = shallow(<Provider store={store}>
<SomeConnectedComponent />
</Provider>)

The wrapper object is empty object ShallowWrapper { }
wrapper.instance() returns null

Expected behavior

The wrapper object should be a shallow instance object of the component
wrapper.instance() should return the instance object

API

• [x] shallow
• [ ] mount
• [ ] render

Version

| library | version
| ------------------- | -------
| enzyme | 3.9.0
| react | 16.8.6
| react-dom | 16.8.6
| react-test-renderer | 16.8.6
| adapter (below) |

Adapter

• [x] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-16.3
• [ ] enzyme-adapter-react-16.2
• [ ] enzyme-adapter-react-16.1
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [ ] others ( )

Stackoverflow Question: https://stackoverflow.com/questions/59191129/swallow-connected-component-with-react-redux-6

[sebaveg]

I have same problem. React-redux memoize the elements for the rendered child component as an optimization. So first params in shallow is a object, not a React.Component.
I get this error:

Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `object`.

https://github.com/reduxjs/react-redux/commit/8719eda7049d2341d8d394c4751b3f7c548166b3

[ljharb]

Will reopen if that doesn't solve it for the OP.

[andreeaneacsu33]

I have the same problem after upgrading react-redux to 7.1.3. All the tests that use shallow wrapper's instance method fail. Is there any fix for this issue?

[challapruthvi]

I having same problem after upgrading react-redux to 7.2.0. The shallow is not working as expected in the tests. Is there any workaround for this until it gets fixed ?

@sunnyofhell Do you have any workarounds for this issue ?

[sebaveg]

I did this:

jest.mock('react', () => {
    const r = jest.requireActual('react');

    return { ...r, memo: (x) => x };
});

const shallowWithStore = () => shallow(<RoomListContainer store={store} />).dive();

I hope will help you @challapruthvi

[andreeaneacsu33]

The fix for my tests was do make another .dive() before accessing the .instance() method. Apparently, all the tests for components that were exported with connect() where failing because another dive() into the component was necessary. ( shallowWrapper.dive().instance() )

[challapruthvi]

I have tried to dive() like below:

import { Provider } from 'react-redux';

const wrapper = shallow(<Provider store={store}>
<SomeConnectedComponent />
</Provider>)`

wrapper.name() - Connect(Translate(COMPONENTNAME))

If I do wrapper.dive().instance() - I am still getting the below error

Error: Could not find "store" in the context of "Connect(Translate(COMPONENTNAME))". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Translate(COMPONENTNAME)) in connect options.

Not sure what I am missing here. Any help will be appreciated.