reactjs - React 测试库 - 如何发送“anchorEl”作为道具？

Question

我有一个显示材质 UI 菜单的组件，并从父组件获取 anchorEl。我想测试这个组件，但我不知道我应该发送什么作为 anchorEl 道具

我的组件：

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

我该如何模拟它？

标签： reactjsmaterial-uireact-testing-library

Answer 1

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

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