如何用React-Test-Library模拟内容溢出？

Question

我正在使用材料表连同材料ui来创建一个电子表格应用程序。我实现的一个行为是单元格的最大宽度为50px。如果该单元格的内容太大，它将默认在单词的末尾使用省略号（参见启用了noWrap prop的排版材料-UI组件）。如果此单元格悬停，将呈现一个弹出窗口，显示单元格的全部内容。它通过检查scrollWidth>clientWidth来检查单元格是否溢出，如果是，则启用onMouseEnter和onMouseLeave行为来显示和隐藏弹出窗口。一切正常。我的问题是，我很难在使用jest/react-test-library编写的测试中复制这种行为。当我调用react-testing render方法时，它不会输出溢出行为，即使在cell组件中有一个很长的值。这是因为它是在虚拟呈现，而不是在浏览器中实际呈现吗？如果是的话，我有没有办法强迫溢出行为？我已经附加了我的当前组件，连同计算溢出函数和当前测试。

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,也没有滚动。