React testing library - how to send "anchorEl" as prop?

Viewed 674

I have a component that displays material-ui menu, and gets the anchorEl from the parent component. I want to test this component, but I don't know what should I send as the anchorEl prop

my component:

import React from 'react';
import { Menu, MenuItem } from '@material-ui/core';
import { PopulatedNode, NodeMenuItem } from '../types';

interface Props {
  node: PopulatedNode;
  items: NodeMenuItem[];
  anchorEl: (EventTarget & HTMLButtonElement) | undefined;
  onClose: () => void;
}

const NodeMenu = (props: Props) => {
  const { node, items, anchorEl, onClose } = props;

  return (
      <Menu
        id="node-menu"
        anchorEl={anchorEl}
        keepMounted
        open={!!anchorEl}
        onClose={onClose}
        data-testid="node-menu"
      >
        {items.map(({ onClick, disabled, label }) => (
          <MenuItem
            key={label}
            onClick={onClick}
          >
            {label}
          </MenuItem>
        ))}
      </Menu>
  );
};

export default NodeMenu;

I want the menu to be open, so anchorEl must be of type EventTarget & HTMLButtonElement

How can I simulate it?

1 Answers

You can pass any valid DOM element, i.e.:

const mockAnchorEl = document.createElement("button");
Related