TypeError: window.matchMedia is not a function

はじめに

UIライブラリのコンポーネントをテストした際にこのようなエラーが発生しました。

解決方法

私の場合は__test__/utils/index.tsxに配置しました。

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

参考

https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom