我正在使用material-table和material ui创建电子表格应用程序。我已经实现了一个最大宽度为50px的行为，如果该单元格的内容过大，则默认在单词末尾添加省略号（请参见启用noWrap属性的Typography Material-UI组件）。如果悬停在此单元格上，则会呈现一个弹出窗口，显示单元格的完整内容。它通过检查scrollWidth > clientWidth来检查单元格是否溢出，如果是，则启用onMouseEnter和onMouseLeave行为以显示和隐藏弹出窗口。这一切都很好地运行。我的问题是，在使用jest/react-testing-library编写的测试中，我很难复制这种行为。当我调用react-testing render方法时，即使在单元格组件中有非常长的值，它也不会输出溢出行为。这是因为它只是虚拟渲染而不是实际在浏览器中呈现吗？如果是这样，有没有办法强制溢出行为？我已附上当前组件、计算溢出函数和当前测试。
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());
});