【Jest × react-testing-library】.map is not a functionの解決方法

はじめに

Jestを使ったテストを書いていた際に発生したエラーについての記事です。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

問題

以下のように、Supabaseから取得した画像データをimagesとしてmapでループ処理し表示させるコードを書きました。

修正前

App.jsx

const [images, setImages] = useState<ImageType[] | undefined>([]);

//省略

images.map((image, index) => (
<Box key={index}>
  <Link href={`/Clothes/${image.id}`} display="block" w="100%" h="100%">
    <Image src={image.file_url} alt="clothes" w="80%" margin="auto" py={4} />
    <Text textAlign="center">{image.id}</Text>
  </Link>
</Box>
))

しかし、テスト実行時に次のエラーが発生しました。

const mockImgDate = jest.fn().mockResolvedValue({ file_name: "testImg", file_url: "testUrl" });

解決方法

原因はモックデータの形式に問題があったことでした。

APP.jsx

const [images, setImages] = useState<ImageType[] | undefined>([]);

受け取ったデータを配列として扱う必要があるのに対し、モックデータが配列の形になっていませんでした。

修正後

const mockImgDate = jest.fn().mockResolvedValue([{ file_name: "testImg", file_url: "testUrl" }]);

この修正によってimages.mapが配列として正しく動作するようになり、テストが通るようになりました。

終わりに

今回のエラーは、モックデータの型と実際のコードが不一致だったことが原因でした。引き続きテストの精度を高めるために学習を続けていきたいと思います。