Vue3 + jest でCannot find module 'babel-preset-env'

Question

こちらのサイトなどを参考にjestをプロジェクトにインストールして実行しようとしています。

しかしここでCannot find module 'babel-preset-env'というエラーが出ています。
詳細は下記になります。

 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run
Cannot find module 'babel-preset-env'
   Require stack:
    - /puroject_name/node_modules/@babel/core/lib/config/files/plugins.js
    - /puroject_name/node_modules/@babel/core/lib/config/files/index.js
    - /puroject_name/node_modules/@babel/core/lib/index.js
    - /puroject_name/node_modules/babel-jest/build/index.js
    - /puroject_name/node_modules/@jest/transform/build/ScriptTransformer.js
    - /puroject_name/node_modules/@jest/transform/build/index.js
    - /puroject_name/node_modules/jest-runtime/build/index.js
    - /puroject_name/node_modules/@jest/core/build/cli/index.js
    - /puroject_name/node_modules/@jest/core/build/jest.js
    - /puroject_name/node_modules/jest-cli/build/cli/index.js
    - /puroject_name/node_modules/jest-cli/bin/jest.js
    - Did you mean "@babel/env"?

調べてみると同じようなエラーでbabel-preset-envやbabel-core@bridgeのインストールが必要だというような情報は出てきましたがそれらは既にインストールしています。

yarn list --depth=0 | grep babel-preset
├─ @vue/babel-preset-app@4.5.9
├─ @vue/babel-preset-jsx@1.2.4
├─ babel-preset-jest@24.9.0

yarn list --depth=0 | grep babel-core
├─ babel-core@7.0.0-bridge.0

またbabel.config.jsは下記のようになっています。

module.exports = {
	presets: [
		'@vue/cli-plugin-babel/preset'
	],
	env: {
		"test": {
			"presets": ["env", "stage-2"]
		},
		"production": {
			"plugins": ["transform-remove-console"]
		}
	}
}

なぜbabel-preset-envが無いと言われてしまうのでしょうか。。。

この辺り何かきっかけだけでもいいのでご存知の方いたら教えていただけると幸いです。

Answer 1

上記のサイトを見て試してみました。

npx babel-upgradeをターミナルで叩いた後、
@babel/plugin-proposal-function-sentと@babel/plugin-proposal-throw-expressionsをインストールして、
babel.config.jsを以下のように変更したらどうでしょうか。

// babel.config.js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  env: {
    "test": {
        "presets": ["@babel/preset-env"],
        "plugins": [
          // Stage 2
          ["@babel/plugin-proposal-decorators", { "legacy": true }],
          "@babel/plugin-proposal-function-sent",
          "@babel/plugin-proposal-export-namespace-from",
          "@babel/plugin-proposal-numeric-separator",
          "@babel/plugin-proposal-throw-expressions",
        ]
    },
    "production": {
        "plugins": ["transform-remove-console"]
    }
}
};

説明
Babelのアップデートで名前がbabel-preset-envから@babel/preset-envに、
babel-preset-stage-2から@babel/preset-stage-2に変わりました。
その後、@babel/preset-stage-2は無くなるなど、変更が大規模になりました。
なので公式がnpx babel-upgradeというコマンドで自動でアップグレードしてくれるコマンドを追加しました。

参考
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

Comments

[Hayato1201]

まさにこの通りでできました！ありがとうございます。