Cara Mengatasi Error "ResizeObserver is not defined" di Jest

1 menit baca.
Tags: JavaScriptJestUnit test

Error ResizeObserver is not defined sering muncul saat kamu unit test kode JavaScript yang memakai API ResizeObserver. Jest berjalan di environment Node.js, dan ResizeObserver adalah fitur browser yang tidak ada di sana. Fix-nya gampang: mock ResizeObserver di setup Jest.

Kenapa error ini muncul

Jest berjalan di Node.js, jadi objek khusus browser seperti ResizeObserver tidak tersedia secara default. Begitu kode yang dites memakai ResizeObserver, Jest tidak menemukannya dan melempar error.

Solusi: mock ResizeObserver

Buat versi tiruan ResizeObserver supaya kode kamu bisa jalan di test tanpa error undefined.

Cara mock ResizeObserver

Tambahkan kode ini ke file setup Jest kamu (biasanya jest-setup.js):

// jest-setup.js

global.ResizeObserver = class {
  observe() {}
  unobserve() {}
  disconnect() {}
};

Kode ini mendefinisikan class ResizeObserver tiruan secara global. Isinya tiga method: observe, unobserve, dan disconnect. Method-nya kosong, tapi cukup supaya kode kamu bisa memanggilnya di test.

Menyesuaikan mock

Kalau kode kamu bergantung pada callback atau perilaku tertentu dari ResizeObserver, kembangkan mock-nya. Tiru bagian yang dipakai kode kamu saja, tidak perlu semuanya.