Jestをv28にバージョンアップした話

はじめに

はじめまして、ラクスル事業部 PBU（Printing Business Unit）開発チームでフロントエンドエンジニアをしている沖です。

ラクスルに参画して半年たちましたが、まだまだフレッシュな気持ちでいます。

さてRAKSUL Advent Calendar 2022の12月5日の記事では、

今年の8月に対応した「Jestをv28にバージョンアップした作業」について話していきたいと思います。

経緯

PBUで扱っているrepositoryではフロントエンドの単体テストとしてJestを使用しておりますが、開発環境のメンテナンスの一環として24.8.0から28へバージョンアップ対応を行いました。

アップデートする前の開発環境

Node.js: v14.19.2
Jest: 24.8.0
Typescript: 3.8.3

どのように対応したか

まずJestのv25からv28までにある破壊的変更について調査することからはじめました。

調査方法

Jestのgithub上のCHANGELOG.mdから[BREAKING]タグが付いているものを洗い出す
Jestのアップグレードガイドから「breaking」の文字を探す
Jestの公式ブログからbreaking changeを洗い出す

調査してわかったこと

調査してざっくり下記のことがわかりました。

jest-environment-jsdomパッケージを個別にインストールする必要がある
ts-jestのversionもv28に上げる必要がある
babel-jestでのversionもv28に上げる必要がある
TypeScriptのバージョンを4.3以上にする必要がある

実際に手を動かしてみた

調査する限り大規模な変更はなさそうということで、実際にバージョンアップ作業を行いました。

対応したことを順番に記述していきます。

Jestのv28.1.3をインストール

npm install --save-dev jest@28.1.3

jest-environment-jsdomパッケージを個別にインストール

アップグレードガイドより、v28にバージョンアップする際はjest-environment-jsdomを個別にインストールする必要があるようです

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

Jestの設定ファイルにtestEnvironmentを追記

"testEnvironment": "jsdom”

テストを実行するとts-jestのエラーが発生したので、Jestのバージョンにあわせてts-jestをアップデート

Error: ● Invalid transformer module:
  "~/node_modules/ts-jest/dist/index.js" specified in the "transform" object of Jest configuration
  must export a `process` or `processAsync` or `createTransformer` function.
  Code Transformation Documentation:
  https://jestjs.io/docs/code-transformation

npm install --save-dev ts-jest@28.0.2

テストを実行するとbabel-jestのエラーが発生したので、Jestのバージョンにあわせてbabel-Jestをアップデート

TypeError: Cannot destructure property 'config' of 'undefined' as it is undefined.

      at Object.getCacheKey (node_modules/babel-jest/build/index.js:151:8)

npm install --save-dev babel-jest@28.1.3

テストを実行すると下記エラーが発生。

Cannot read property 'createNodeArray' of undefined

こちらのissueによるとTypescriptを上げる必要があるとのことでした。

Typescriptを3.8.3から4.3.4へバージョンアップ

npm install typescript@4.3.4

4.3.4のバージョンアップに伴い以下の修正を行いました。

importしているファイルの拡張子.d.tsを削除
Typescriptのバージョンアップの影響で下記エラーが発生していたので、こちらのissueを参考にtypescript-eslintを5.40.0へバージョンアップしてエラーを解消
```
  error Parsing error: Cannot read property 'map' of undefined
```
typescript-eslintの他にEslint、ts-loaderなど関連するパッケージをバージョンアップ
Eslint系パッケージのバージョンアップの影響によりeslint-loaderで下記エラーが発生していたので、子コンポーネントでprops のプロパティを直接を書き換えていた箇所を親コンポーネントで書き換えるように修正
```
  error  Unexpected mutation of "hoge" prop
```
※補足) Eslint系のパッケージは下記のバージョンにアップデートしました
- eslint: 7.22.0
- eslint-loader: 4.0.2
- eslint-plugin-prettier: 3.3.1
- eslint-plugin-vue: 7.7.0
テストを実行するとエラーは解消されましたが、下記のように警告が出ていました。

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

警告の文言通りにJestの設定ファイル内にあるtestURLをtestEnvironmentOptionsに変更

"testURL": "http://localhost/"

↓

"testEnvironmentOptions": {
    "url": "http://localhost/"
}

ローカルのエラーと警告は解消されましたが、次はCircleCIのテストでタイムアウトしてしまいました。

Too long with no output (exceeded 10m0s): context deadline exceeded

CircleCiの公式ドキュメントを見てみると下記の記述がありました。

Jest テストの実行時には、--runInBand フラグを使用してください。このフラグがない場合、Jest はジョブを実行している仮想マシン全体に CPU リソースを割り当てようとします。 --runInBand を使用すると、Jest は仮想マシン内の仮想化されたビルド環境のみを使用するようになります。

runInBandのオプションを追加して無事CircleCiのタイムアウトエラーも解消されました

"test:ci": "jest --runInBand"

感想

npmパッケージのバージョンアップってついつい後回しにしてしまいがちですよね。

ラクスルに参画するまでは受託開発の現場が多く、腰を据えてバージョンアップ作業に取り組むのはほとんど初めての経験でした。

バージョンアップ作業はトライ&エラーの繰り返しという地道な作業ではありますが、個人的にはパズルを解いているようで苦労しながらも楽しんで作業ができたように感じます。新しい自分こんにちは。

また、npm auditしてみると脆弱性のあるパッケージがちらほらあったのでそれも気持ちが熱いうちに対応していきたいと思います。

最後に

自分が楽しみつつ作業ができたのは、ひとえに記事を上げてくださった先人たちの苦労があってこそであります。

この記事もどこかでバージョンアップに苦戦しているエンジニアの一助になれば幸いです。

ラクスルではエンジニアを募集しています！どしどしご応募お待ちしております。

RAKSUL TechBlog

ラクスルグループのエンジニアが技術トピックを発信するブログです