Библиотека тестирования React - как отправить "anchorEl" в качестве реквизита?

#reactjs #material-ui #react-testing-library

#reactjs #материал-пользовательский интерфейс #react-testing-library

Вопрос:

У меня есть компонент, который отображает меню material-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 amp; 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 amp; HTMLButtonElement

Как я могу это смоделировать?

Ответ №1:

Вы можете передать любой допустимый элемент DOM, т.е.:

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