Jestでaliasを使ったモジュール参照を扱う

JavaScript のテストフレームワークJestの小ネタです。

最近 react や react-native のプロジェクトでモジュールの参照に alias を使うことが多いのですが、Jest でこれを扱う方法について紹介です。

alias を使ったモジュール参照

alias を使ったモジュール参照とは、プロジェクト内の特定のディレクトに別名(alias)をつけることで、import文の記述を簡単にすることです。

例えば、次のような相対パスでモジュールを import している箇所に alias を使ってみましょう。

// greet.ts は src/shared/services にあるとする
import { greet } from "../../../greet.ts";

alias を使う場合は、まずsrc/sharedにSharedという alias をつけます。そうすると次のように相対パスを除いて書くことができます。

// Shared は src/shared を参照している
import { greet } from "Shared/services/greet.ts";

alias を使うメリットとしては、import文の記述を簡略化することもあるますが、相対パスを使った場合よりリファクタなどの変更に強いことが挙げられます。

moduleNameMapper を使って alias を扱う

Jest で alias を扱うためにはmoduleNameMapperを使って alias と実際のパスをマッピングします。

• https://jestjs.io/docs/en/configuration#modulenamemapper-object-string-string

上の例の場合は次のようになります。

module.exports = {
  moduleNameMapper: {
    "^Shared(.*)$": "<rootDir>/src/shared/$1",
  },
};

これで Jest でも、alias を使ったモジュール参照があるプロジェクトをテストすることができました。