How do I write tests for higher order components in Enzyme.

I have spent some time online searching for documents around how to do this. There seems to be a few ways. But I am not sure on which is the best way to do this.

This is what I have so far

My HOC

interface IStateProps {
    errorState: IErrorState;
    tList: IList;
}

interface IDispatchProps {
    fetch: () => any;
}

interface IState {
    isLoading: boolean;
}

interface IConnectedProps extends IStateProps, IDispatchProps {}

export class UnconnectedBrowserLoader extends React.Component<IConnectedProps, IState> {
    public state = {
        isLoading: true,
    };

    public render() {
        const {errorState} = this.props;
        if (errorState.error) {
            return (
                <div className="non-ideal">
                    <NonIdealState visual="error" title={"Could Not Load Tasks"}/>
                </div>
            );
        }
        if (this.state.isLoading) {
            return (
                <div className="non-ideal">
                    <NonIdealState visual={<Spinner/>}/>
                </div>
            );
        }
        return (
            <div className="body">
                <Container/>
            </div>
        );
    }

    public componentWillMount() {
        Promise.all([
            this.props.fetch(),
        ]).then(() => {
            this.setState({isLoading: false});
        });
    }
}

function mapStateToProps(state: IBrowserState): IStateProps {
    return {errorState: state.errorState, tList: state.taskList};
}

function mapDispatchToProps(dispatch: Dispatch<IBrowserState>): IDispatchProps {
    return bindActionCreators({
        fetch,
    }, dispatch);
}

export const BrowserLoader = connect(
    mapStateToProps, mapDispatchToProps,
)(UnconnectedBrowserLoader);

My tests now looks like this - WIP

describe("Browser tests", function() {
    test("test the browser loader for error case", () => {
        const mockStore = configureMockStore([thunk]);
        const store = mockStore({
            errorState: {
                error: "internal error"
            }
        });

        const wrapper = mount(<Provider store={store}><BrowserLoader/></Provider>);
        expect(wrapper.find('.non-ideal')).toHaveLength(1); // this works
        expect(wrapper.find('.body')).toHaveLength(0); // this works
    });
    test("test the browser loader", () => {
        const mockStore = configureMockStore([thunk]);
        const store = mockStore({});
        const dispatch = sinon.spy();
        const wrapper = shallow(
            <Provider store={store}><BrowserLoader/></Provider>
        );
       expect(wrapper.find('Connect(UnconnectedBrowserLoader)')).toHaveLength(1); //This works
       expect(wrapper.find('Connect(UnconnectedBrowserLoader)').props()).toEqual({}); // this works too

       // Not sure how to pass mapStateToProps and mapDispatchToProps.
        const uwrapper = shallow(<UnconnectedBrowserLoader dispatch={dispatch} store={store}/>); //This does not work it complains "Property store does not exist on IConnectedProps

        // I tried this too
       const uwrapper = wrapper.find('Connect(UnconnectedBrowserLoader)').shallow() // this does not work too - it gives error Could not find "store" in either the context or props of "Connect(UnconnectedBrowserLoader)". 
    });
});

What is it that I am doing wrong?! Can anyone point me to it? any help would be appreciated. SO link - http://stackoverflow.com/questions/44031658/enzyme-tests-for-higher-order-components-redux

[ljharb]

shallow-render the wrapper, do .dive(), and then write assertions on the enzyme wrapper that provides around the inner component.

[dabit1]

I finally found a very good solution to get a wrapper from a decorated component. For shallowed components you can use dive() but there is no similar method for mounted components. This is the solution I did:

const wrapper = mount(shallow(<MyComponent />).get(0))

Works like a charm 😃