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

【问题标题】：Testing onClose event from a component to be called using jest从要使用 jest 调用的组件中测试 onClose 事件
【发布时间】：2018-10-12 11:12:38
【问题描述】：

我正在使用 jest 和酶对反应组件进行测试，但还没有弄清楚如何从 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？

【问题讨论】：

标签： reactjs jestjs enzyme

【解决方案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();
});

【讨论】：