我正在使用 jest 和酶对react组件进行测试,但还没有弄清楚如何从 material-ui 菜单测试 onClose 事件。这同样适用于其他组件,但为了这个问题,我们可以坚持使用菜单。这是我的组件:
import { Menu, MenuItem } from "@material-ui/core";
export class ItemPreviewerPage extends React.Component<ComponentProps, ComponentState> {
constructor(props) {
super(props);
this.state = {
anchorEl: undefined,
fieldsetMenu: undefined,
isColumnSelectorOpen: false,
};
}
render() {
const { classes } = this.props;
const moreMenuOpen = Boolean(this.state.anchorEl);
return (
<Menu className={classes.cardMenu}
id="long-menu"
anchorEl={this.state.anchorEl}
open={moreMenuOpen}
onClose={() => this.handleClose()}
PaperProps={{
style: {
maxHeight: 48 * 4.5,
width: 200
}
}}>
</Menu>
);
}
}
对于测试,如果我将 anchorEl 的状态设置为 true 然后设置为 false,我希望菜单会关闭。
it("Calls the handleClose when the Menu is closed", () => {
const props = initialProps;
const wrapper = shallow(<ItemPreviewerPage {...props} />);
const spy = jest.spyOn(wrapper.instance(), "handleClose");
wrapper.setState({ anchorEl: true });
wrapper.instance().forceUpdate();
wrapper.setState({ anchorEl: false });
wrapper.instance().forceUpdate();
expect(spy).toBeCalled();
});
怎么了?如何测试 onClose?