Cara Mock IntersectionObserver di Setup Jest

4 menit baca.
Tags: jestunit-testjavascript

Kalau test kamu crash dengan IntersectionObserver is not defined, kamu butuh mock IntersectionObserver di Jest. Di JSDOM API ini memang belum ada, jadi komponen untuk lazy loading, animation, atau infinite scroll sering langsung gagal saat render.

Kenapa IntersectionObserver error di Jest

Jest biasanya jalan di environment Node + JSDOM. Kamu dapat window, document, dan DOM API dasar, tapi tidak semua browser API tersedia.

IntersectionObserver termasuk yang tidak ada, jadi baris sederhana ini saja sudah bisa bikin test gagal:

new IntersectionObserver(() => {});

Tambahkan global mock di jest.setup.ts

Buat atau update setup file kamu:

class MockIntersectionObserver implements IntersectionObserver {
  readonly root: Element | Document | null = null;
  readonly rootMargin = "0px";
  readonly thresholds = [0];

  disconnect(): void {}
  observe(_target: Element): void {}
  takeRecords(): IntersectionObserverEntry[] {
    return [];
  }
  unobserve(_target: Element): void {}
}

Object.defineProperty(window, "IntersectionObserver", {
  writable: true,
  configurable: true,
  value: MockIntersectionObserver,
});

Object.defineProperty(globalThis, "IntersectionObserver", {
  writable: true,
  configurable: true,
  value: MockIntersectionObserver,
});

Lalu pastikan file ini di-load oleh Jest:

// jest.config.ts
import type { Config } from "jest";

const config: Config = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
};

export default config;

Biasanya ini sudah cukup.

Opsional: cek pemanggilan method di test

Kalau kamu mau assert observe benar-benar terpanggil, pakai spy:

const observe = jest.fn();
const unobserve = jest.fn();
const disconnect = jest.fn();

class MockIntersectionObserver implements IntersectionObserver {
  readonly root: Element | Document | null = null;
  readonly rootMargin = "0px";
  readonly thresholds = [0];

  disconnect = disconnect;
  observe = observe;
  takeRecords(): IntersectionObserverEntry[] {
    return [];
  }
  unobserve = unobserve;
}

Sekarang kamu bisa assert seperti ini:

expect(observe).toHaveBeenCalled();

Kesalahan yang sering kejadian

Jangan taruh mock ini hanya di satu test file kalau tujuannya umum. Simpan di jest.setup.ts supaya semua test suite punya environment yang konsisten.

Kesimpulan

Fix paling cepat untuk IntersectionObserver is not defined di Jest adalah global mock IntersectionObserver di jest.setup.ts. Mulai dari mock yang minimal dulu, lalu tambah spy kalau test kamu memang butuh validasi perilaku.

Related Posts