TS Version of mocking ResizeObserver

datagrid.test.tsx

type ResizeObserverMockCallback = (entries: ResizeObserverEntry[]) => void;

interface IResizeObserverMock {
  observe: (target: Element) => void;
  disconnect: () => void;
  unobserve: (target: Element) => void;
}

function ResizeObserverMock(callback: ResizeObserverMockCallback): IResizeObserverMock {
  let timeout: ReturnType<typeof setTimeout>;

  return {
    observe: (element: Element) => {
      timeout = setTimeout(() => {
        const entry: ResizeObserverEntry = {
          target: element,
          contentRect: element.getBoundingClientRect(),
          borderBoxSize: [{ inlineSize: element.clientWidth, blockSize: element.clientHeight }],
          contentBoxSize: [],
          devicePixelContentBoxSize: [],
        };
        callback([entry]);
      });
    },
    disconnect: () => {
      clearTimeout(timeout);
    },
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    unobserve: () => {},
  };
}

const originalResizeObserver: typeof window.ResizeObserver = window.ResizeObserver;

beforeEach(() => {
  (window as any).ResizeObserver = ResizeObserverMock;
});

afterEach(() => {
  window.ResizeObserver = originalResizeObserver;
});