Testing redux's ConnectedComponent

Question

I have been trying to test redux's ConnectedComponent. But I can't get along with it. When I pass the store to a ConnectedComponent as a store prop I get 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: . You may also pass a {context : MyContext} option to connect

My test:

const store = storeFactory({ success: true });
test('renders component without error', () => {
  const wrapper = shallow(<Input store={store} />);

  expect(wrapper.props()).toBe({});
});

I use a helper function that creates a store:

export const storeFactory = initialState => {
  return createStore(rootReducer, initialState);
};

I use this versions of packages:

"react-redux": "^6.0.0",
"redux": "^4.0.1",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"enzyme-redux": "^0.2.1",
"jest": "^23.6.0",
"jest-enzyme": "^7.0.1"

I don't know how to test ConnectedComponent. Please, if you have any solutions or suggestions for this situation share it with me))

markerikson markerikson · Accepted Answer · 2019-01-20T19:31:36

Yes, in React-Redux v6, we removed the ability to pass store as a prop to connected components, because of internal architecture changes.

I'll be honest and say that shallow rendering a connected component seems pointless to me, because all you're really testing is that connect calls your mapState and mapDispatch and passes the combined results to your own component. We already have tests for React-Redux that verify that behavior :)

However, there do seem to be people that want to do this. We've got an open issue to discuss how we can help handle the "shallow+connected" use case. No ETA on specific changes to the API, but please keep an eye on that issue.

Testing redux's ConnectedComponent

1 Answers