从要使用 jest 调用的组件测试 onClose 事件

Question

我正在使用jest和酶对反应组件进行测试，还没有弄清楚如何从material-u界面菜单中测试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>
);
}
}

对于测试，如果我将锚点的状态设置为 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();
});

怎么了？如何测试关闭

？

Answer 1

我想出了如何测试它。setState 不会直接影响行为，我需要将模拟函数与 close 参数一起使用：

it("Calls handleClose when menu is closed", () => {
const props = initialProps;
const tree = shallow(<ItemPreviewerPage {...props} />);
tree.find(Menu).simulate("close");
expect(props.handleClose).toBeCalled();
});