更高阶组分的酶测试 - 还原

Question

我花了一些时间在线搜索有关如何执行此操作的文档。似乎有几种方法。但我不确定哪种方法最好。

这是我到目前为止所拥有的

我的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);

我的测试现在看起来像这样 - 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();
  });
});

我做错了什么？！有人能指点我吗？ 任何帮助将不胜感激。