TIL: mocking an IntersectionObserver

We want to test a component that to be intersection to the viewport is happened sometime when using React.
I found an easy solution in @shopify/jest-dom-mocks.

Something like this (Pseudocode, but fundamental's included):

import { render, waitFor } from '@testing-library/react';
import { intersectionObserver } from '@shopify/jest-dom-mocks';

describe('MyTest', () => {
  beforeEach(() => {
    intersectionObserver.mock();
  });
  afterEach(() => {
    intersectionObserver.restore();
  });

  const table = [
    {
      message: 'intersection test',
      onEvent: jest.fn(),
      subject: async ({ onEvent }:{ onEvent: jest.Mock }) => {
        await waitFor() => intersectionObserver.simulate({ isIntersecting: true }));
        expect(onEvent).toHaveBeenCalled();
      },
    },
  ];

  test.each(table)('$message', async ({ onEvent, subject }) => {
    render(<Some onEvent={onEvent} />);
    await subject({ onEvent });
  });
});