【Vitest】Cannot read property 'details' of undefined と TypeError: env.window.matchMedia is not a function

背景

Vitest + Chakra UI + RTL + Next.jsでテストを実装したときに起きたエラーです。

解決策

sample.test.tsx

import { ChakraProvider } from "@chakra-ui/react"

describe('Sample', () => {
  test('サンプルのテスト', () => {
    render(
        <ChakraProvider>
            <SampleComponent />
        </ChakraProvider>
    )
  });
});

ChakraProviderで囲むことでタイトルのエラーを解決することができます。しかしこれだけだと以下のエラーが出てしまします。

TypeError: env.window.matchMedia is not a function

このエラーはvitest.config.tsで定義したsetupFilesに以下を追加することで解決します。

setup.ts

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

Chakra UIのuseBreakpointではwindowオブジェクトが使用されています。しかし、Node環境ではwindowオブジェクトをデフォルトでは利用することができないため、エラーが起きたということでした。