Chakra UI v3をJestでテストしたらTypeError: window.matchMedia is not a function

はじめに

chakra ui v3をJestでテストした際に起きたエラーです。

問題

テストを実行すると、TypeError: window.matchMedia is not a functionとwindowオブジェクトの matchMedia関数が無いと指摘されます。

解決方法

jest.setup.tsに下記を追加します。

jets.setup.ts

global.matchMedia =
  global.matchMedia ||
  function () {
    return {
      matches: false,
      addListener: jest.fn(),
      removeListener: jest.fn(),
    };
  };

一言でいうと、matchMedia がデフォルトで用意されていなければ、何もしないような関数に置き換えるということです。

参考