Fix Jest Matchmedia Not Defined

Kalau kamu测试 React komponen yang pakai window.matchMedia, Jest akan crash dengan error TypeError: window.matchMedia is not a function. API browser ini tidak ada di environment jsdom.

Kenapa terjadi

Jest menjalankan test di Node.js dengan jsdom, yang tidak mengimplementasikan window.matchMedia. Semua kode yang memanggil matchMedia — umum di komponen responsif, media query hooks, atau UI library — akan gagal.

Solusinya

Tambahkan mock ini di file setup Jest:

// jest.setup.ts
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

Kalau pakai versi Jest/jsdom yang lebih lama, kamu mungkin butuh addListener dan removeListener (seperti di atas). Versi yang lebih baru pakai addEventListener/removeEventListener.

Buat return true untuk query tertentu

Kalau test kamu perlu matchMedia return matches: true:

window.matchMedia = jest.fn().mockImplementation(query => {
  if (query === '(min-width: 768px)') {
    return {
      matches: true,
      media: query,
      onchange: null,
      addListener: jest.fn(),
      removeListener: jest.fn(),
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    };
  }
  return {
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  };
});

Verify kalau berhasil

it('renders differently on mobile', () => {
  render(<MyComponent />);
  expect(window.matchMedia).toHaveBeenCalled();
});

Selesai. Mock ini kasih kamu matchMedia yang bekerja dengan predictable di test.