如何用react-testing library模拟内容溢出？

Question

我使用material-table和material ui来创建一个电子表格应用程序。我实现的行为之一是单元格的最大宽度为50px。如果该单元格的内容太大，它将默认为单词末尾的省略号(请参阅排版材料-启用了noWrap属性的UI组件)。如果该单元格悬停在上方，则会出现一个弹出窗口，显示该单元格的全部内容。它通过检查scrollWidth > clientWidth来检查单元格是否溢出，如果是，则启用onMouseEnter和onMouseLeave行为来显示和隐藏弹出窗口。这一切都运行得很好。我的问题是，我正在努力在使用jest/react- test -library编写的测试中复制这种行为。当我调用react-testing render方法时，它不会输出溢出行为，即使在cell组件中有一个非常长的值。这是因为它是虚拟渲染，而不是在浏览器中实际渲染吗？如果是这样，有没有办法强制溢出行为？我已经附加了current组件，以及calculate overflow函数和current测试。

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());
});

Answer 1

我认为这是因为单元测试不能在真正的浏览器中运行。所以它不会执行CSS，也不会有滚动。