【Jest】import文で『SyntaxError: Cannot use import statement outside a module』が発生するときの対処

はじめに

Jestでテストを動かそうとしたときに『Jest encountered an unexpected token』や『SyntaxError: Cannot use import statement outside a module』のエラーが発生して、毎度初期設定のやり方をググっている気がするので、n番煎じですがざっとまとめることにしました。

あとこのエラー文での記事がほぼないので、初心者が辿りやすいようにということで。

直接原因：JestのデフォルトではESMをサポートしていない

JestではECMAScriptModule (ESM)はまだ実験的なサポートのみで、デフォルトではimport/export文は利用できません。

なので、Babelを使って、Jest実行時のタイミングにCommonJSの形式に変換してあげる必要があります。

対処方法

その１：Babelのインストール

下記コマンドを実行します。

$ npm install --save-dev babel-jest @babel/core @babel/preset-env

yarnの場合はこちら。

$ yarn add --dev babel-jest @babel/core @babel/preset-env

その２：ディレクトリ直下にbabel.config.jsを追加する

新規でファイル作成して、下記を貼り付けします。

babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        modules: "false",
        useBuiltIns: "usage",
        targets: "> 0.25%, not dead",
      },
    ],
  ],
  env: {
    test: {
      presets: [["@babel/preset-env", { targets: { node: "current" } }]],
    },
  },
};

その３：テスト実行！

これで通りますね〜

その他ポイント：package.jsonのtypeには何も指定しない or "commonjs"を指定する

importまわりのエラーが出たので何も考えずにこのあたりをいじりまくったことが記憶にあるのですが、package.jsonのtypeは書かないか、"type": "commonjs"にしましょう。

package.json

{
  "main": "./src/index.js",
  "type": "commonjs",
  "scripts": {
    "test": "jest"
~~~~ 省略 ~~~~
  }

参考記事