【Jest】トランスパイルできないモジュールをモック化する方法

はじめに

JestはES5以下にトランスパイルできないモジュールがあるとエラーになってしまいテストを実行できません。
どうすればよいのでしょうか？

解決方法

テストの内容に関連のないモジュールであれば、モジュールごとモックしてしまうことでテストを進めることができます。

エラーの例

[react-native-firebase]というライブラリを導入したところ、Jestのテストで読み込めませんでした。

    SyntaxError: Cannot use import statement outside a module

      1 | import React, { useEffect } from 'react';
    > 2 | import firebase from '@react-native-firebase/dynamic-links';
        |                                   ^

よく紹介されている方法

transformIgnorePattern にモジュール名を記述する方法がよく紹介されていますが、エラーが治らないこともあるようです。

moduleNameMapperを使用する方法

今回はmoduleNameMapperを使用して、モックファイルをJestに参照させる方法でエラーを回避することができました。

moduleNameMapperを設定ファイルに記述する

Jestの設定に追加します。
今回は
@react-native-firebaseと名前のつくモジュール全ての参照をfirebaseMock.jsというモックに指定しています。

package.json

"jest": {
    "moduleNameMapper": {
      "@react-native-firebase/*": "<rootDir>/jest/mocks/firebase/firebaseMock.js"
    },

モックファイルを作成する

先ほど指定したディレクトリ（ファイル構造は別になんでもいい）にモックファイルを作成します。

exportしてモジュールとして利用できさえすれば、特に中身のない空コンポーネントで良いと思います。

firebaseMock.js

export default () => ({
  log: (message) => {},
  recordError: (err) => {},
});

まとめ

transformIgnorePatternを利用して完全無視させる方法も良いのですが、moduleNameMapperを設定した方がモックモジュール内でアレコレすることも必要に応じて可能になります。

状況によってはこちらの方が便利かもしれません。