When to use "Component.WrappedComponent" when writing enzyme tests - reactjs

Question

What I'm trying to do:
I'm trying to use shallow rendering from enzyme by following the below pattern which works for many other components in my project.
describe('>> MyComponent - Render', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<MyComponent.WrappedComponent
actions={{}}
history={}
/>);
});
it("test something", () => { expect(wrapper).toEqual(1); });
});
What's the problem I have:
I got an error saying "Cannot read property 'contextTypes' of undefined", which means wrapper is undefined. But when I change <MyComponent.WrappedComponent /> to just <MyComponent />, the tests are successful. This is my code:
describe('>> Legends - render', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<Legends textsAndColor={[]} />);
});
it('+++ render the component', () => {
expect(wrapper.length).toEqual(1);
});
it('+++ match snapshot', () => {
expect(wrapper).toMatchSnapshot();
});
});
Question I have:
What exactly does .WrappedComponent do ? And why does <MyComponent /> works but not <MyComponent.WrappedComponent /> ?

Answer 1

By using .WrappedComponent you are getting access to component, wrapped by redux's connect function.
I assume that most of your components are connected (since there are no problems with use of .WrappedComponent) and component that throwing described error isn't connected.
I suggest you to read redux docs to find out how to write tests for this case. Briefly said they suggest to have default export for your connected component and non-default for raw component. And then import only raw component for testing purposes, like this:
import { MyComponent } from './path/to/my/component`;
after this you will be able to mount (or shallow) your raw component like this:
describe('>> MyComponent - Render', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<MyComponent />);
}
});