I'm trying to test if a button toggle works as expected.
This is my code.
<>
<IconButton color="secondary" data-testid="HelpIconButton" ref={anchorRef} onClick={handleToggle}>
<Help />
</IconButton>
<Popper {...{ open }} anchorEl={anchorRef.current} transition disablePortal data-testid="HelpIconPopper">
{({ TransitionProps, placement }) => (
<Grow {...TransitionProps} style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} onKeyDown={handleListKeyDown}>
{menuItems.map(({ onClick, label }, index) => (
<MenuItem key={index} {...{ onClick }}>
{label}
</MenuItem>
))}
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</>
In the browser, clicking the browser works as expected. Clicking on the IconButton toggles the Popper, removing and adding it into the DOM.
On test however, firing a click event placed the Popper in the DOM but its not removed when fired again. Hence, the popper isn't toggled.
Here is the test Code.
it('Ensures the help menu toggles when the help button is clicked.', () => {
const { getByTestId, queryByTestId } = render(<HelpButton />);
expect(queryByTestId('HelpIconPopper')).not.toBeInTheDocument();
fireEvent.click(getByTestId('HelpIconButton'));
expect(queryByTestId('HelpIconPopper')).toBeInTheDocument();
fireEvent.click(getByTestId('HelpIconButton'));
expect(queryByTestId('HelpIconPopper')).not.toBeInTheDocument();
});
A work around currently in use is using fireEvent.doubleClick
it('Ensures the help menu toggles when the help button is clicked.', () => {
const { getByTestId, queryByTestId } = render(<HelpButton />);
expect(queryByTestId('HelpIconPopper')).not.toBeInTheDocument();
fireEvent.doubleClick(getByTestId('HelpIconButton'));
expect(queryByTestId('HelpIconPopper')).not.toBeInTheDocument();
});
The second test passes.