useBreakpointValueはChakraUIに実装されているブレークポイント値を判断して、適切なデバイスを判断してくれるカスタムフックです。

とても便利なフックなのですが、useBreakpointValueを使ったコンポーネントをreact-testing-libraryでテストを書こうとすると以下のエラーが出る時があります。

TypeError: Cannot read properties of undefined (reading 'details')

原因と対処

このエラーはuseBreakpointValueフックが Chakra UI のコンポーネントツリーの外で使用されている時に起きるエラーです。

テストファイルから対象のコンポーネントのみを呼び出すと、起こります。

考えられる対処としては、以下の方法があります。

• ① テストファイルで対象コンポーネントをChakraProviderで囲む
• ② useBreakpointValueをモック化して値を返す

②のuseBreakpointValueをモック化した方が手軽なので、今回はその方法で対処しました。

useBreakpointValueをモック化する

import * as chakra from "@chakra-ui/react";

jest.spyOn(chakra, "useBreakpointValue").mockImplementation(() => false);

こんな感じでファイルの冒頭でuseBreakpointValueをモック化しておけば、テストが落ちなくなります。