4

我在我的项目中使用反应材料和popper组件。我正在尝试测试popper与单元测试一起使用的组件。

这是组件中的方法：

constructor(props) {
    super(props);
    this.state = {
      openMenu: false,
    };
  }

  onToggleMenu() {
    this.setState(prevState => ({openMenu: !prevState.openMenu}))
  }

  onCloseMenu() {
    this.setState({openMenu: false})
  }

这是我使用 popper 的渲染部分：

         <IconButton
              classes={{root: classes.expandButton}}
              aria-label="menu"
              buttonRef={node => this.anchorEl = node}
              aria-owns={openMenu ? 'menu-list-grow' : undefined}
              aria-haspopup="true"
              onClick={() => this.onToggleMenu()}
            >
              <ArrowDropDownIcon fontSize="large"/>
            </IconButton>
            <Popper open={openMenu} anchorEl={this.anchorEl} placement="bottom-end" transition disablePortal>
              {({TransitionProps, placement}) => (
                <Grow
                  {...TransitionProps}
                  id="menu-list-grow"
                  style={{transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'}}
                >
                  <Paper>
                    <ClickAwayListener onClickAway={() => this.onCloseMenu()}>
                      <MenuList disablePadding>
                        <MenuItem onClick={onDeaktiver}>Deaktiver</MenuItem>
                      </MenuList>
                    </ClickAwayListener>
                  </Paper>
                </Grow>
              )}
            </Popper>

我试图这样测试：

it('opens the menu', async () => {
    const header = editor.findByType(EditorHeader);
    expect(header.instance.state.openMenu).toBeFalsy();
    const menuButton = header.findByProps({'aria-label': 'menu'});
    menuButton.props.onClick();
    expect(header.instance.state.openMenu).toBeTruthy();
})

但是，然后我得到错误：

错误：失败：“错误：未捕获 [TypeError：无法设置未定义的属性“转换”]

如何模拟 popper 或修复此问题以便进行此测试工作？

4

1 回答 1

1

MUI Menu 组件有同样的问题。

react-transition-group似乎存在一个已知问题。票中发布的解决方法很少，但其中大多数对我不起作用，所以我最终模拟了 MUI 组件。

jest.mock('@material-ui/core', () => {
  const materialUI = jest.requireActual('@material-ui/core');
  return {
    ...materialUI,
    Menu: jest.fn(({ children, open }) => (open ? children : null)),
  };
});
于 2020-08-09T14:30:10.167 回答