Next(v4)にjestを導入したい

Question

Next.jsの初心者です。
今回フロントエンドのテスト実装にjestを導入することに決めました。
試行錯誤していましたが上手くいかないため、こちらで質問させていただきます。

解決したいこと

Next.js(v4.2.3)環境下で、.babelrcファイルのpresetにnext/babelを指定してjestを動作させたいです。
jestのバージョンにこだわりはありません。

バージョン

• Next.js : v4.2.3
• Next.js(v4.2.3)のbabel-coreは6.2.6でした。
• jest: 22.4.4
• babel-jest: 22.4.4

前提

.babelrc

  "presets": [
    "next/babel"
  ],

試したこと

試したこと１（preset変更）

公式サイトを見ながらv22のjestをインストールしました。

npm i -D jest@v22 babel-jest@v22 babel-core

package.jsonに下記を追加

  "scripts": {
    "test": "jest",
  },
  "jest": {
    "testURL" : "http://localhost"
  }

実行

npm run test

エラーが発生。

Plugin/Preset files are not allowed to export objects, only functions.

調べるとパッケージが足りないなどが出てきますが、next/babelです。
node_modules/next/package.jsonを見る限り、問題ありませんでした。

↓

.babelrcのpresetsを変更すると解決しました。

"presets": [
    "preset-env"
],

ちなみにbabel7をインストールし、"@babel/preset-env"を指定してもjestv22は動作しました。

試したこと２

Next.jsのバージョンを上げる。

• next4... display:○ jest(v23):×
• next6.1... display:△ jest(v23):×
• next7... display:× jest(v23):○
• next8.1... display:× jest(v23):○
• next9... display:× jest(v23):○

バージョンを上げることでjestが動作するようになるみたいですが、影響範囲が大きいので既存プロジェクトでは気軽にできず…（汗）

他、試したこと

• Nextのバージョンは4のままで、jestのバージョンを上げていく。
• "babel-core": "^7.0.0-bridge.0"をインストール
• jestv24のときにjest.config.jsを作成する
• babel7の時にbabel.config.jsを作成してpresetを書く

結局プロジェクト依存なので、Next.js(v4.2.3)のnext/babelでjestを動作させる以外の道はなさそうなのですが、テスト導入はこんなに難しいものなのでしょうか…。

もし解決方法をご存知の方がいらっしゃいましたら、ご教授いただければ幸いです。

Answer 1

解決しました！
同じ悩みの方がいらっしゃいましたら、下記内容からどうぞ。
https://qiita.com/nazuna_Nakagawa/items/84fcc9ab7dab12211f8b