React material - получение TypeError: Невозможно установить свойство 'transition' из undefined при тестировании компонента popper

Question

Я использую реактивный материал и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();
})

Но тогда я получаю ошибку:

Ошибка: Ошибка: "Ошибка: Uncaught [TypeError: Невозможно установить свойство 'transition' of undefined]

Как я могу издеваться над поппером или исправить это, чтобы у меня была эта тестовая работа?

Answer 1

Была такая же проблема с компонентом меню MUI.

Похоже, есть известная проблема с 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)),
  };
});