reactjs - React 测试库 - 如何发送 "anchorEl"作为 Prop ？

Question

我有一个显示 material-ui 菜单的组件，并从父组件获取 anchorEl。
我想测试这个组件，但我不知道我应该发送什么作为anchorEl prop
我的组件:

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;

我希望菜单是打开的，所以 anchorEl 的类型必须是 EventTarget & HTMLButtonElement我怎样才能模拟它？

Answer 1

您可以传递任何有效的 DOM 元素，即:

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