はじめに
Jest でテストコードを作成する過程で下記の jest.config.js と babel.config.js を作成していたものの、NextJs でアプリ起動時に掲題のエラーが出てハマったのでその対応メモになります。
jest.config.js
module.exports = {
testEnvironment: "jest-environment-jsdom",
transform: {
"^.+\\.(ts|tsx)$": "babel-jest", // TypeScriptファイルをトランスパイル
"^.+\\.(js|jsx)$": "babel-jest", // JavaScriptファイルもトランスパイル
},
moduleFileExtensions: ["ts", "tsx", "js", "jsx"], // 拡張子を追加
setupFilesAfterEnv: ["/setupTests.ts"],
moduleNameMapper: {
"\\.(css|less|scss|sass)$": "identity-obj-proxy",
},
};
babel.config.js
module.exports = {
presets: [
"@babel/preset-env",
["@babel/preset-react", { runtime: "automatic" }], // JSXサポートを追加
"@babel/preset-typescript", // TypeScriptサポート
],
};
原因について
NextJs では以下に記載の通り、デフォルトで SWC というコンパイラを使用しています。
この SWC コンパイラと、Jest 対応で追加した Babel とでコンパイラが複数競合したことで今回のエラーが発生しました。
※Jestで JSX 構文などトランスパイルしてテスト実行できるようにするために、Babel を入れていました
対応内容について
NextJsデフォルトのSWCコンパイラはそのままで、Babel なしで Jest テストは動かしつつ、NextJsアプリも起動するように修正しました。
対応したこと
- babel.config.js を削除
- jest.config.js を下記のように修正
module.exports = {
testEnvironment: "jest-environment-jsdom",
transform: {
"^.+\\.(ts|tsx|js|jsx)$": [
"babel-jest",
{
presets: [
"@babel/preset-env",
["@babel/preset-react", { runtime: "automatic" }], // JSXサポートを追加
"@babel/preset-typescript",
],
plugins: [
// Babelのプラグインをここに直接指定
"@babel/plugin-transform-runtime",
],
},
], // TypeScript,JavaScriptファイルをトランスパイル
},
moduleFileExtensions: ["ts", "tsx", "js", "jsx"], // 拡張子を追加
setupFilesAfterEnv: ["/setupTests.ts"],
moduleNameMapper: {
"\\.(css|less|scss|sass)$": "identity-obj-proxy",
},
extensionsToTreatAsEsm: [".ts", ".tsx"],
};
Jest だけでテストコードが動くように、plugins に babel plugin の指定を追加しました。
なお、追加で下記コマンドで Babel 関連Pluginをインストールしました。
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
終わりに
NextJs環境下では Babel がうまく動かないことを知りました。同じようなエラーに遭遇した方にとって何か参考になれば幸いです。
