0

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);
});
});
Aditya Gyawali
  • 1

1 Answers1

0

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'
codeKid
  • 75
  • 2
  • 12
  • I am using export default Component to test with react-redux ... I tried using export Component so I could only test that component without react-redux. `export default connect(mapStateToProps)(Input)` – Aditya Gyawali Jan 07 '19 at 14:54
  • Like I said in order to test only the component itself, you must add "export" key word in front of your component : export class App extends Component {} And add it in test file with curly braces: import { App } from ... – codeKid Jan 07 '19 at 15:07
  • I get your point, but I don't want to test component itself, I already did that and it works. I want to test when the app is connected with redux. And when I try to test the `connected component`, it gives me the error which I mentioned in the question. – Aditya Gyawali Jan 07 '19 at 15:40
  • If you want to test its interaction with Redux, you can wrap it in a with a store created specifically for this unit test. – codeKid Jan 07 '19 at 15:51
  • I added `store = mockStore(initialState); wrapper = shallow( );` **MY test ** `it("should rendder a div with className `row`", () => { expect(wrapper.find(".row")).toHaveLength(1); });` **Error** expected length : 1, received : symbols **I have that div with className row** – Aditya Gyawali Jan 07 '19 at 16:13
  • I think you should not pass the store in your component, only in the Provider. The Provider job is to passing the store down chain to all components – codeKid Jan 07 '19 at 16:22
  • It's the same error even if I don't pass the store inside the component. – Aditya Gyawali Jan 07 '19 at 16:25