Reactjs ResizeObserverAPI测试笑话

我尝试测试钩子，它使用了

ResizeObserver

。此外，我还需要检查元素在调整大小后是否溢出。所以我写了这样一个决定：

从'react'导入{useLayoutEffect，useState}；
从“resize observer polyfill”导入ResizeObserver；
导出默认函数useOverflowCheck（ref）{
const[isOverflowing，setIsOverflowing]=useState（false）；
const isOverflow=当前=>{
如果（当前）{
const hasOverflowX=当前.offsetWidth<当前.scrollWidth；
const hasOverflowY=current.offsetHeight{
常量元素=参考电流；
const resizeObserver=新的resizeObserver（条目=>{
entries&&entries.length&&isOverflow（条目[0].target）；
});
if（元素）{
调整观察者的大小。观察（元素）；
return（）=>{
resizeObserver.disconnect（）；
};
}
});
回流等溢流；
}

我试图对这段代码进行单元测试，但我的测试没有涵盖

resizeObserver

回调。 测试：

从'@testing library/react hooks'导入{renderHook}；
从“/index”导入useOverflowCheck；
描述（'useOverflowCheck'，（）=>{
它（'对于溢出的组件应返回true'，（）=>{
const el:htmldevelment=document.createElement（'div'）；
对象。定义属性（el{
offsetWidth:{value:30，configurable:true}，
越界：{值：30，可配置：true}，
});
常数参考={
当前：el，
};
expect（renderHook（（）=>useOverflowCheck（ref））.result.current.toBeTruthy（）；
});
});

应该定义Resize Observer构造函数，并添加一个侦听器来测试Resize Observer回调

let listener: ((rect: any) => void) | undefined = undefined;
    (global as any).ResizeObserver = class ResizeObserver {
      constructor(ls) {
        listener = ls;
      }
      observe() {}
      unobserve() {}
      disconnect() {}
    };

然后应指定所需的属性：

act(() => {
      listener!([
        {
          target: {
            clientWidth: 100,
            scrollWidth: 200,
            clientHeight: 100,
            scrollHeight: 200,
          },
        },
      ]);
    });

灵感来自