[Jest]@を使いたければmoduleNameMapperに設定しよう

Last updated at 2024-10-14Posted at 2024-10-14

はじめに

最近Reactのテストに挑戦しているところで、同じような人の参考になればと思い、ちょっとずつ記事にしていきます。
間違い・認識違いあればご指摘いただけると助かります！

テストのディレクトリを変更しようとした時に、importと同じようにjest.mockのmoduleNameに@(エイリアス)を使ったところ
Cannot find module '@/〇〇〇〇〇〇' from '__tests__/〇〇〇〇〇〇' のエラーとなりました。

jest.mock('../actions', () => ({

jest.mock('@/features/auth/actions', () => ({

tsconfig には下記設定をしており "@/..." を "./..." にマッピングしています。

tsconfig.json

    "paths": {
      "@/*": ["./*"]
    }

テストの時も、この設定が反映されるものだと思っていましたが、Jestには反映されないようです。

jest.config側の設定に下記を追加します。
こちらは正規表現で記載が必要です。
同じ設定をしていないと混乱するので、基本的には全く同じにしておいた方が良さそうです。

jest.config.ts

  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/$1",
  },

これでimportと同じように書いても同じマッピングがされるようになりました。

import { aaa, bbb } from "@/components/abc";

jest.mock('@/components/abc', () => ({
  aaa: jest.fn(),
  bbb: jest.fn(),
}));

あっちも../../こっちも../../みたいな地獄が頭をよぎったのですっきり！

jest.config.tsの設定はまだまだ使えてないものがたくさんあるので少しずつ確認していこうと思います。