☕️

Jest v28に上げるためにやったこと

2022/04/29に公開
2

先日 Jest v28 がリリースされましたね🎉
https://jestjs.io/blog/2022/04/25/jest-28

早速、趣味プロジェクトで使用している Jest を v28 に上げてみたので、その時に対応した内容をまとめておきます。間違っているところがあれば、優しくコメントしていただけると助かります🙏

対応前の環境

  • @vue/test-utils v1.1.0
  • Jest v27.0.6

対応していく

まずはJest v28に上げてみる

アップグレードガイドを見る限り、そこそこ非互換な変更が入っているようです。今回はエラーになったものを順次対応していく形にしようと思います。
https://jestjs.io/docs/28.x/upgrading-to-jest28

まずは、Jest v28 に上げてみます。

package.json
  "devDependencies": {
    ...
-   "jest": "^27.0.6",
+   "jest": "^28.0.2",
    ...
  },

この状態でテストを実行してみたところ、jsdom のエラーが発生しました。

jsdomがデフォルトではインストールされなくなった

テスト実行後、下記のエラーが発生しました。

● Validation Error:

  Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.

  Configuration Documentation:
  https://jestjs.io/docs/configuration


As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.

アップグレードガイドによると、jest-environment-jsdom を別途インストールする必要があるみたいです。

https://jestjs.io/docs/28.x/upgrading-to-jest28#jsdom

アップグレードガイドに従い、まずは jest-environment-jsdom をインストールします。

$ npm install --save-dev jest-environment-jsdom

次に testEnvironment を変更します。

jest.config.js
module.exports = {
-  testEnvironment: "jsdom",
+  testEnvironment: "jest-environment-jsdom",
  ...
};

この状態でテストを実行すると、transformer 周りで入った非互換な変更によるエラーが発生しました。

transformer 周りが変わったことによるエラー

テスト実行後、下記のエラーが発生しました。

● Invalid return value:
  Code transformer's `process` method must return an object containing `code` key 
  with processed string. If `processAsync` method is implemented it must return 
  a Promise resolving to an object containing `code` key with processed string.
  Code Transformation Documentation:
  https://jestjs.io/docs/code-transformation

調べていると、ts-jest のリポジトリで上記のエラーについて言及している Issue がありました。
https://github.com/kulshekhar/ts-jest/issues/3453

下記のコメントを見る限り、既に修正されている & next タグでリリースされているようなので、ts-jest のバージョンを上げれば良さそうです。

https://github.com/kulshekhar/ts-jest/issues/3453#issuecomment-1108912300

package.json
  "devDependencies": {
    ...
-   "ts-jest": "^27.0.4",
+   "ts-jest": "^28.0.0-next.2",
    ...
  },

再度、npm install してみたところ、babel-jest でエラーが出たので、こちらもバージョンを上げます。

package.json
  "devDependencies": {
    ...
-   "babel-jest": "^27.0.6",
+   "babel-jest": "^28.0.2",
    ...
  },

次は問題なくインストールできました。
この状態で再度テストを実行してみたところ、エラーなく実行できました🎉

終わりに

Jest 28 で入った新機能の中で、いくつか気になっているものがあるので、気が向いた時に試してみようと思います!

参考

Discussion

Sho YamadaSho Yamada

アップグレードの際に大いに参考にさせてもらいました。ありがとうございます。
最新がv29になった影響でマイグレーションガイドのURLが変更されたので、今から試される方はそこだけご注意ください。

Keita HinoKeita Hino

ご報告ありがとうございます、リンク切れになっていたところを新しいURLに貼り替えました🙏