"Vitestで遭遇したエラー『TypeError: window.matchMedia is not a function』の解決方法"

エラー内容

テスト実行時に以下のエラーが発生しました。

TypeError: window.matchMedia is not a function

上記エラーの原因はwindow.matchMediaがテスト環境で提供されていないためです。window.matchMediaはブラウザ環境で動作しますが、@testing-library/reactやvitestのようなテスト環境ではデフォルトでは定義されていません。

解決方法

以下のようにvitestのセットアップファイルでwindow.matchMediaをモックすることで問題を解決できます。

setup.ts

import { vi } from 'vitest';

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