Как смоделировать переполнение контента с помощью response-testing-library?

Question

Я использую таблицу материалов вместе с пользовательским интерфейсом материала для создания приложения для работы с электронными таблицами. Один из вариантов поведения, который я реализовал, - это максимальная ширина в ячейках 50 пикселей. Если содержимое этой ячейки слишком велико, по умолчанию в конце слова будет использоваться многоточие (см. Компонент «Типографский материал-пользовательский интерфейс» с включенной поддержкой noWrap). Если эта ячейка наведена, будет отображаться всплывающее окно, показывающее все содержимое ячейки. Он проверяет, переполнена ли ячейка, проверяя, если scrollWidth> clientWidth, и, если это так, включает поведение onMouseEnter и onMouseLeave для отображения и скрытия всплывающего окна. Это все отлично работает. Моя проблема в том, что я пытаюсь воспроизвести это поведение в тесте, написанном с использованием библиотеки jest / реагировать на тестирование. Когда я вызываю метод рендеринга с реагированием на тестирование, он не выдает поведение переполнения, даже с очень длинным значением в компоненте ячейки. Это потому, что он фактически рендеринг, а не рендеринг в браузере? Если так, есть ли способ заставить поведение переполнения? Я добавил свой текущий компонент вместе с функцией вычисления переполнения и текущим тестом.

const calculateOverflow = element => {
  return element ? element.scrollWidth > element.clientWidth : false;
}

export default function OverflowCell(props) {
  const typeRef = useRef();
  const { value } = props;
  const classes = useStyles(props);
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handlePopoverOpen = event => {
    setAnchorEl(event.currentTarget);
  };

  const handlePopoverClose = () => {
    setAnchorEl(null);
  };

  const isOverflowing = calculateOverflow(typeRef.current);

  const open = Boolean(anchorEl);

  return (
    <div>
      <Typography
        ref={typeRef}
        aria-owns={open ? 'mouse-over-popover' : undefined}
        aria-haspopup={isOverflowing ? 'true' : 'false'}
        aria-label={isOverflowing ? 'overflowCell' : 'cell'}
        onMouseEnter={isOverflowing ? handlePopoverOpen : undefined}
        onMouseLeave={isOverflowing ? handlePopoverClose : undefined}
        className={classes.overFlowText}
        noWrap
      >
        {value}
      </Typography>
      {isOverflowing && (
        <Popover
          className={classes.popover}
          classes={{
            paper: classes.paper,
          }}
          open={open}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'left',
          }}
          onClose={handlePopoverClose}
          disableRestoreFocus
        >
          <Typography>{value}</Typography>
        </Popover>
      )}
    </div>
  );
}

it('triggers popover when overflowing string is hovered', async () => {
  const cellValue = 'test value that is very longggggggggggggggggggggggggggggggggggggggggg';
  const divStyle = {
    'max-width': '10',
  };
  mockRowData[0].forname = cellValue;
  const { asFragment, getByLabelText } = render(
    <div style={divStyle}>
      <OverflowCell value={cellValue} />
    </div>,
  );
  const initialRender = asFragment();
  const overflowCell = getByLabelText('cell');
  Simulate.mouseEnter(overflowCell);
  await delay(500);
  expect(initialRender).toMatchDiffSnapshot(asFragment());
  Simulate.mouseLeave(overflowCell);
  await delay(500);
  expect(initialRender).toMatchSnapshot(asFragment());
});