相关疑难解决方法(0)

这是我的自定义钩子：

  export function useClientRect() {
    const [scrollH, setScrollH] = useState(0);
    const [clientH, setClientH] = useState(0);
    const ref = useCallback(node => {
      if (node !== null) {
        setScrollH(node.scrollHeight);
        setClientH(node.clientHeight);
      }
    }, []);
    return [scrollH, clientH, ref];
  }
}

我希望每次调用它时，它都会返回我的值。喜欢：

jest.mock('useClientRect', () => [300, 200, () => {}]);

我怎样才能做到这一点？

我想知道我是否可以获得DOM元素的实际宽度和坐标,因为我可以在浏览器中使用.clientWidth/.offsetWidth.

jsdom是否具有浏览器渲染功能以获取此数据？

如果没有,我怎么能在node.js服务器中得到它？

谢谢!

我有一个测试用例，我需要模拟 useRef 才能返回模拟当前值。我尝试了 jest.mock 但它返回一个 HTMLDivElement 。

代码：

   const ref = useRef<HTMLDivElement | null>(null);

测试：

  jest.mock('react', () => {
     const originReact = jest.requireActual('react');
       return {
          ...originReact,
          useRef: jest.fn(),
       };
  });



  React.useRef.mockReturnValue({ current: {offsetWith: 100} }); 

模拟回报

[ { type: 'return', value: { current: [HTMLDivElement] } } ]

我的组件用于useLayoutEffect执行一个函数来计算位置的两个状态变量。相同的函数被传递给内部容器之一的 Element.scroll 事件：

代码如下所示：

export const Component = ({children}) => {
    // .....

    const containerRef = useRef<HTMLDivElement>(null);
    const [canClickLeft, setCanClickLeft] = useState(false);
    const [canClickRight, setCanClickRight] = useState(false);

    const checkForPosition = () => {
      if (containerRef.current) {
        // logic here;

        const positionLeft = false;
        const positionRight = true;
  
        setCanClickLeft(positionLeft);
        setCanClickRight(positionRight);
      }
    };

    const doSomething = () = {....}
  
    useLayoutEffect(() => {
        checkForPosition();
    });


    return (
      <>
        <StyledContainer onScroll={() => checkForPosition()}>
          {children}
        </StyledContainer>
  
        <button disabled={!canClickLeft} onClick={doSomething}>Click Left</button>
        <button disabled={!canClickRight onClick={doSomething}}>Click …