Question

我在项目中使用react material and the 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或解决此问题，以便进行测试？

Answer 1

MUI菜单组件也有同样的问题。

似乎有一个已知的issue，带有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)),
  };
});

反应材料-收到TypeError：测试Popper组件时无法设置未定义的属性“ transition”

1 个答案: