Mock IntersectionObserver

List.test.tsx

import { act, render, screen } from "@testing-library/react"
import { List } from "./List"

type IntersectFn = (entries: any[]) => void

function mockIntersectionObserver(): [
  jest.MockedObject<IntersectionObserver>,
  IntersectFn
] {
  let intersectionObserverCallback: IntersectFn = () => {}

  const intersect = (entries: any[]) => {
    intersectionObserverCallback(entries)
  }

  const mock = {
    root: null,
    rootMargin: "",
    thresholds: [0],
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn(),
    takeRecords: jest.fn()
  }

  window.IntersectionObserver = jest.fn().mockImplementation(callback => {
    intersectionObserverCallback = callback
    return mock
  })

  return [mock, intersect]
}

test("renders list items", async () => {
  const handleFetch = jest.fn().mockResolvedValue([
    {
      id: "a",
      text: "lorem"
    },
    {
      id: "b",
      text: "ipsum"
    }
  ])
  const [, intersect] = mockIntersectionObserver()

  render(<List onFetch={handleFetch} />)

  expect(handleFetch).not.toHaveBeenCalled()
  act(() => intersect([{ isIntersecting: true }]))
  expect(handleFetch).toHaveBeenCalledTimes(1)

  const items = await screen.findAllByRole("listitem")
  expect(items).toHaveLength(2)
  expect(items[0]).toHaveTextContent("lorem")
  expect(items[1]).toHaveTextContent("ipsum")
})