Enzyme tests for higher order components - redux

Question

Enzyme tests for higher order components - redux

I spent some time on the internet looking for docs on how to do this. There seem to be several ways. But I'm not sure if this is the best way to do it.

This is what I still have

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 look 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>
    );
   // Not sure how to pass mapStateToProps and mapDispatchToProps.
    const uwrapper = shallow(<UnconnectedBrowserLoader dispatch={dispatch} store={store}/>); //This does not work
    expect(shallowToJson(wrapper)).toMatchSnapshot();
  });
});