[Vue] vue-jest が発する Requires Babel “^7.0.0-0”, but was loaded with “6.26.3” の解決

Vue2で作ったアプリを久しぶりに修正しようとして、まず依存をupgradeしてからとりまテストでも動かしますかとコマンド叩いてみたら表題のエラーで死んだ

Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "/....your-source-directory..../node_modules/@babel/preset-env/lib/index.js")

なるほどね？🤔

devDependenciesには謎に babel-core と @babel/core があって、何かしらが古い方にかかってるんだろうということが伺えた。

メッセージに従ってstacktraceを見ると…

vue-jest お前だったのか、犯人は…。

で、vue-jestのリポジトリを見に行ったら、バージョンがめちゃくちゃ増えていた。

色々なバージョンに適応するためこうなってしまったそうだが、こういうライブラリをメンテする人は大変そうだなあ。

使われていたのはJest26だったので、vue-jest@4を入れ直したらエラーは消えた。

Jest28対応

Jest28にする場合は関連ライブラリを全て28対応のものにしないとなので、@vue/vue2-jest@28か@vue/vue3-jest@28 になる。
@vue/test-utilsはvue2とvue3でバージョン指定が異なる。2系の場合は@vue/test-utils@1が必要。

testURLオプションの修正

Option "testURL" was replaced by passing the URL via "testEnvironmentOptions.url".

jest.config.js内、

{
  testURL: 'http://localhost:8800'
}

testURLをtestEnvironmentOptionsに変更。

{
  testEnvironmentOptions: {
    url: 'http://localhost:8800'
  }
}

transformオプションの修正

jest.config.js内、

transform: {
    '.*\\.(vue)$': 'vue-jest',
  },

vue-jestを@vue/vue2-jestに変更

'.*\\.(vue)$': '@vue/vue2-jest',

Cannot find module ‘jest-environment-jsdom’

アップグレードガイドによると、別途インストールが必要になったそうなのでaddする。

 yarn add jest-environment-jsdom --dev

元々testEnvironmentで使ってたのは jest-environment-jsdom-global なのだが、jsdomの設定をコメントで指定できるようになったので、28系以降を使っていて、オプションの指定だけしたいのであればこのライブラリは要らなそうだ🤔

testEnvironment: 'jest-environment-jsdom',

上記testURLの指定も、コメントで可能になる。

/**
 * @jest-environment jsdom
 * @jest-environment-options {"url": "http://localhost:8800"}
 */

windowsオブジェクトに対してなんかしたいとかいう場合だと、jsdomのreconfigureメソッドを使うことになるが、それはJestが対応してないのでこのライブラリが便利である。

ReferenceError: Vue is not defined

vue-test-utilsはjest28にまだ対応してなかったらしい…

https://github.com/vuejs/vue-test-utils/issues/1975

jest.config.jsに回避策を追加する。

moduleNameMapper: {
	'^@vue/test-utils$': require.resolve('@vue/test-utils'),
},