【Next.js】テスト実行時のみbabelの設定が効くようにしたい

はじめに

こちらの記事の補足となります

テストが通るところまで出来たのですが、
ローカルサーバを起動すると以下のエラーが発生しました

---

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

解決方法

テスト実行時のみbabelの設定が効くように修正

babel.config.js

module.exports = {
-    presets: [
-        ["@babel/preset-env", { targets: { node: "current" } }],
-        ["@babel/preset-react", { "runtime": "automatic" }]
-    ],
+    env: {
+        test: {
+            presets: [['@babel/preset-env', {targets: {node: 'current'}}], ["@babel/preset-+react", { "runtime": "automatic" }]],
+        },
+    },
};

next.config.js

+  experimental: {
+    forceSwcTransforms: true,
+  },

原因

babelの設定ファイルがあるとNext.jsが強制的に参照してしまうようでした

参考記事

おわりに

今回はさくっと解決できたので良かったです