【jest】moduleNameMapperを用いて絶対パスでimportする方法

絶対パスでモジュールをimportすることで、ディレクトリ構造の変更が発生しても影響を受けにくくなります。

この記事では、jestでのテスト時において、『絶対パスでモジュールをimportする方法』を分かりやすく説明するように心掛けています。ご参考になれば幸いです。

moduleNameMapperで絶対パスのimportをする方法

jestでのテスト時において、import文やrequire文を用いてモジュールを絶対パスで記述するためには、moduleNameMapperを「jest.config.js」に設定します。

moduleNameMapperは、Jestの設定の中でモジュール名の置換を行うためのオプションです。

一例として、以下のディレクトリ構成の状態において、「test/sample.spec.js」が「src/sample.js」をテストする場合を考えてみましょう。

ディレクトリ構成

jestTest                //プロジェクトのルートディレクトリ
├─src                           
│  └─sample.js          //テスト対象のファイル   
├─test
│    └─sample.spec.js   //テストコードを記載しているファイル
├─jest.config.js 　　　　//Jestの設定ファイル　                     
├─node_modules          //npmパッケージがインストールされるフォルダ
├─package.json      　  //アプリで使用するパッケージ情報を定義するファイル
└─package-lock.json     //インストールされたパッケージが記載されているファイル

「src/sample.js」と「test/sample.spec.js」のプログラム例を以下に示します。

src/sample.js

// CJSの場合
module.exports.hello = function () {
  return 'Hello!';
};

// ESMの場合
// export function hello() {
//   return 'Hello!';
// }

test/sample.spec.js

「test/sample.spec.js」では以下のように「src/sample.js」を絶対パスでインポートします。

// 絶対パスでインポートする場合(今回は以下の様に絶対パスで記述したい)
// CJSの場合
const { hello } = require('src/sample');

// ESMの場合
// import { hello } from 'src/sample';

describe('hello', () => {
  it('should return correct message', () => {
    expect(hello()).toBe('Hello!');
  });
});

「test/sample.spec.js」で「src/sample.js」を絶対パスでインポートしようとすると、「Cannot find module 'src/sample' from 'test/sample.spec.js'」のようなエラーが出るかと思います。

この場合、以下に示すようにmoduleNameMapperを「jest.config.js」に設定すると、「src/○○」というパス形式でのインポートが「<rootDir>/src/○○」にマッピングされ、エラーが表示されなくなります。

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '^src/(.+)$': '<rootDir>/src/\',
  },
};

上記のプログラムではmoduleNameMapperに^src/(.+)$': '<rootdir>/src/$1を記述することで、src/○○というパス形式でのインポートを<rootDir>/src/○○にマッピングしています。

  • ^
    • この文字は、文字列の先頭を意味します。例えば、正規表現^abcは「abcで始まる任意の文字列」にマッチします。
  • $
    • この文字は、文字列の終端を意味します。例えば、正規表現abc$は「abcで終わる任意の文字列」にマッチします。
  • (.+)
    • 1文字以上の任意の文字列にマッチし、$1でそれを参照しています。
  • <rootdir>
    • プロジェクトのルートディレクトリを指しています。そのため、「<rootDir>/src/$1 」は実際には「jestTest/src/」以下のファイルを指します。

なお、^src/(.+)$': '<rootdir>/src/$1は以下のように記述しても構いません。

  • ^src/(.*)$': '<rootdir>/src/$1
    • (.+)ではなく、(.*)を用いる。
    • 正規表現の(.*)は0文字以上の任意の文字列にマッチし、$1でそれを参照しています。
  • ^src/sample$': '<rootdir>/src/sample
    • 直接ファイル名を指定する。
    • 「src/sample」というパス形式でのインポートを「<rootDir>/src/sample」にマッピングしている。

本記事のまとめ

この記事ではjestでのテスト時において、『絶対パスでモジュールをimportする方法』について説明しました。

お読み頂きありがとうございました。