I have a scenario where a material-ui ListItem triggers the display of a material-ui Popper containing another ListItem on mouse over using the onMouseOver event. While this functionality works as expected, I am facing difficulties replicating the behavior in Jest/Enzyme Tests.
Below is a simplified example along with the failing test:
https://codesandbox.io/s/priceless-bose-6hi04?fontsize=14&hidenavigation=1&theme=dark
Component Snippet
export default function MyPopoutMenu() {
const [popoverAnchorElement, setPopoverAnchorElement] = useState(null);
const handleMouseEnter = (event) => {
console.log("onMouseEnter - " + event.currentTarget.textContent);
setPopoverAnchorElement(event.currentTarget);
};
const handleClose = (event, index) => {
console.log("closing");
setPopoverAnchorElement(null);
};
let isPopoverOpen = Boolean(popoverAnchorElement);
return (
<div className="App">
<List style={{ maxWidth: "250px" }}>
<ListItem button>
<ListItemIcon>
<FolderIcon />
</ListItemIcon>
<ListItemText onMouseEnter={handleMouseEnter}>
Hover on me
</ListItemText>
</ListItem>
</List>
<Popper
open={isPopoverOpen}
onClose={handleClose}
anchorEl={popoverAnchorElement}
className="popper-item"
>
<ListItem button>
<ListItemIcon>
<KeyboardArrowRightIcon />
</ListItemIcon>
<ListItemText>I Appear</ListItemText>
</ListItem>
</Popper>
</div>
);
}
Test Snippet
/** Interaction tests testing user interaction with PilzButton */
test("Check that popover appears on hover", () => {
const wrapper = mount(<MyPopoutMenu />);
console.log("wrapper DEBUG - " + wrapper.debug());
//1. Find the menu item to hover on
const foundListItem = wrapper
.find(".MuiListItemText-root")
.filterWhere(item => item.contains("Hover on me"));
expect(foundListItem).toHaveLength(1);
//2. Hover on the item
foundListItem.prop("onMouseEnter")({
currentTarget: {
textContent: "Hover on me"
}
});
act(() => {
//Now try to find the Popover
const foundPopoverListItem = wrapper
.find(".MuiListItemText-root")
.filterWhere(item => item.contains("I Appear"));
expect(foundPopoverListItem).toHaveLength(1);
});
});