Testing a Redux connected component with enzyme and jest

Question

I am unit testing my React app with jest and enzyme and all is good until I happened to test a class component connected with Redux. I went ahead and tested it by wrapping the component with a and then shallow mounting it. However I am not able to run assertions after updating the props of component, nor I am able to spy on the class methods being called or not.

Below is my sample code:

const wrapper = shallow(
    <Provider store={store}>
        <TestComponent {...props}  />
    </Provider>
).dive();

Now when I try t set the props of the wrapper and run assertions, it fails:

wrapper.setProps({
  showHeader:  true
})
expect(wrapper.find('h1')).toHaveLength(1);

Interesting part is, if I export the unconnected component as also suggested in redux docs, the assertions work well. Is it fine to export the unconnected component just for the purpose of testing? I can't spy on instance methods/lifecycle methods if I try to test the connected component.

NirG NirG · Accepted Answer · 2020-02-18T23:01:43

You can mock the connect function from react-redux to return the original component

jest.mock('react-redux', () => ({
   connect: () => Component => Component
}))

Testing a Redux connected component with enzyme and jest

1 Answers