I am using react material and the popper
component in my project. I am trying to test component that uses popper
with unit test.
This are the methods in the component:
constructor(props) {
super(props);
this.state = {
openMenu: false,
};
}
onToggleMenu() {
this.setState(prevState => ({openMenu: !prevState.openMenu}))
}
onCloseMenu() {
this.setState({openMenu: false})
}
And this is the part of the render where I use 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>
I have tried to test this like this:
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();
})
But, then I get the error:
Error: Failed: "Error: Uncaught [TypeError: Cannot set property 'transition' of undefined]
How can I mock popper or fix this so that I have this test work?
Had the same problem with MUI Menu component.
It seems there is a known issue with react-transition-group. There are few workarounds posted in the ticket, but most of them didn't work for me, so I've ended up mocking the MUI component.