VitestでTypeError: window.matchMedia is not a functionがでた

はじめに

前回の記事で、React Testing Libraryのwrapperを使用してproviderをまとめました。

この影響により、エラーが発生したのでその対処法をメモしました。

内容

TypeError: window.matchMedia is not a function

訳： window.matchMedia がないとのこと

なるほど。
テスト環境にwindow.matchMediaがないことでエラーなってました。

これ、providerに含まれるColorModeProviderがwindow.matchMedia()を使用しているようです。

解決

セットアップファイルにモックを追加しました！

import "@testing-library/jest-dom/vitest";
import { vi } from "vitest";

// 簡易matchMedia
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(),
  })),
});

まとめ

ChromeとかSafariでは動くけど、テスト環境ではブラウザを使わないからモックが必要なのですね！
勉強になりました。

参考

ありがとうございます！