Error while doing unit test in react-redux connected component

Question

I am trying to test the connected component(react-redux) with jest-enzyme. I am using react-redux-mock store. When I run my test to find one div in the component it gives me this error.

Invariant Violation: Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. You may also pass a {context : MyContext} option to connect

I did mount and tested just component without redux it works but I want to do a > shallow test.

describe("Input Component", () => {
let wrapper;
let store;
beforeEach(() => {
    store = mockStore(initialState);

    wrapper = shallow(<Input store={store} />);
});

it("should rendder without error", () => {
    expect(wrapper.find("div")).toHaveLength(1);
});
});

codeKid codeKid · Accepted Answer · 2019-01-07T14:47:15

How do you import your component?

if your are importing it with import App from './yourpath/App' for example, ou're actually holding the wrapper component returned by connect(), and not the App component itself.

In order to be able to test the App component itself without having to deal with the decorator, you must to also export the undecorated component:

import { connect } from 'react-redux'

// Use named export for unconnected component (for tests)
export class App extends Component {
/* ... */
}

// Use default export for the connected component (for app)
export default connect(mapStateToProps)(App)

And import it in your test file like that:

import { App } from './yourpath/App'

Error while doing unit test in react-redux connected component

1 Answers