我花了一些时间在线搜索有关如何执行此操作的文档。似乎有几种方法。但我不确定哪种方法最好。
这是我到目前为止所拥有的
我的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();
});
});
我做错了什么?!有人能指点我吗? 任何帮助将不胜感激。