ResizeObserverMock

import { ResizeObserverMock } from '@krutoo/utils/testing';

// creating like normal ResizeObserver
const observer = new ResizeObserverMock(callback);

// using like normal ResizeObserver
observer.observe(element);
observer.unobserve(element);
observer.disconnect(element);

// somewhere in your tests
observer.simulateResize([
  // all entry properties except `target` is optional
  // properties that is not provided will be filled by mocks
  {
    target: document.querySelector('#my-widget'),
  },
]);

import { ResizeObserverContext, useResize } from '@krutoo/utils/react';
import { ResizeObserverMock } from '@krutoo/utils/testing';
import { act, render } from '@testing-library/react';
import { describe, expect, mock, test } from '#test-utils';

function MyComponent({ onResize }) {
  const ref = useRef(null);

  useResize(ref, () => {
    onResize?.();
  });

  return (
    <div ref={ref} data-testid='my-component'>
      Hello from my component
    </div>
  );
}

describe('MyComponent', () => {
  test('should call onResize on resize', () => {
    const observer = new ResizeObserverMock(() => {});

    const context = {
      getObserver(callback: ResizeObserverCallback) {
        return observer.addCallback(callback);
      },
    };

    const spy = mock.fn();

    const { getByTestId } = render(
      <ResizeObserverContext value={context}>
        <MyComponent onResize={spy} />
      </ResizeObserverContext>,
    );

    // no calls after render
    expect(spy.mock.callCount()).toBe(0);

    // one call after resize simulated
    act(() => {
      observer.simulateResize([
        {
          target: getByTestId('my-component'),
        },
      ]);
    });
    expect(spy.mock.callCount()).toBe(1);
  });
});