[Jest] "TypeError: window.matchMedia is not a function" 에러 해결

개요

• Jest + TypeScript 환경에서 usehooks-ts 라이브러리의 useDarkMode 함수를 테스트 하고 있었다.
• useDarkMode는 로컬스토리지에 사용자가 라이트모드인지, 다크모드인지 값을 저장하고 수정할 수 있는 함수를 제공한다.
• useDarkMode 함수가 window.matchMedia를 사용하는데, window.matchMedia가 undefined이므로 해당 에러를 발생한다.

해결

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

• Jest 테스트를 시작하기 전에 window 객체의 matchMedia mock 함수로 정의해준다.

참조

ts환경의 jest에서 window.matchMedia is not a function 해결하기

4.0.0-rc.1 TypeError: window.matchMedia is not a function in Jest - github