Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://stackoverflow.com/questions/72926548/react-testing-library-mock-offsetwidth-offsetleft below:

reactjs - React Testing Library - mock offsetWidth, offsetLeft

I need your help on fixing the test case. I am trying to mock the document body offsetwidth, offsetLeft objects.

In the resize method, I am trying to mock the newWidth which is calculating the mouse position and accordingly getting the actual width and resizing the material UI modal.

index.tsx Following is the section from where I am triggering the enableResize on mousedown event.

 <div onMouseDown={enableResize} className={classes.dragger} />
    

useResize.tsx

  import {
  Dispatch,
  SetStateAction,
  useCallback,
  useEffect,
  useState,
} from 'react';

type UseResizeProps = {
  minWidth: number;
  maxWidth: number;
};

type UseResizeReturn = {
  width: number;
  enableResize: () => void;
  disableResize: () => void;
  isResizing: boolean;
  resize: (e: MouseEvent) => void;
  setWidth: Dispatch<SetStateAction<number>>;
};

const useResize = ({ minWidth, maxWidth }: UseResizeProps): UseResizeReturn => {
  const [isResizing, setIsResizing] = useState(false);
  const [width, setWidth] = useState(minWidth);

  const enableResize = useCallback(() => {
    setIsResizing(true);
  }, [setIsResizing]);

  const disableResize = useCallback(() => {
    setIsResizing(false);
  }, [setIsResizing]);

  const resize = useCallback(
    (e: MouseEvent) => {
      if (isResizing) {
        const newWidth =
          document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
        if (newWidth > minWidth && newWidth < maxWidth) {
          setWidth(newWidth);
        }
      }
    },
    [minWidth, maxWidth, isResizing, setWidth],
  );

  useEffect(() => {
    document.addEventListener('mousemove', resize);
    document.addEventListener('mouseup', disableResize);

    return () => {
      document.removeEventListener('mousemove', resize);
      document.removeEventListener('mouseup', disableResize);
    };
  }, [disableResize, resize]);

  return {
    width,
    enableResize,
    isResizing,
    disableResize,
    resize,
    setWidth,
  };
};

export default useResize;
       

useResize.test.tsx

    const { result } = renderHook(() => useResize(defaultProps));
    const event = new MouseEvent('mousedown', {
      bubbles: true,
      clientX: 1000,
    });

    act(() => {
      result.current.resize(event);
      result.current.enableResize();
    });
    expect(result.current.isResizing).toBeTruthy();

    Object.defineProperty(document.body, 'offsetWidth', {
      value: 1536,
    });

    Object.defineProperty(document.body, 'offsetLeft', {
      value: 0,
    });

    const width: any =
      document.body.offsetWidth - (event.clientX - document.body.offsetLeft);

    window.dispatchEvent(new Event('resize'));

    expect(defaultProps.minWidth).toBeLessThan(width);

    act(() => {
      result.current.setWidth(width);
    });

    expect(result.current.width).toBe(536);
  });

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4