Zenn
🧦

Jest v27 -> v29 へのアップデート時の実行エラーに対応した

2023/12/06に公開
TypeScript
Jest
tech

プロジェクトのバージョンを v27 から v29 にアップデートした際に、いくつか環境エラーが発生したので、その対応方法を書きます。

プロジェクトを新規作成してしばらく経過し、開発が進んでいましたが、Jest 関連のバージョンアップが追随できていなかったので対応しました。

その前に

v29 にアップデートする前に、すでに Jest 実行時に warning が出力されていました。
こちらはおそらく TypeScript を v5 系にアップデートした際に発生したいたものだと思われます。
導入済みの TypeScript のバージョンに対して、ts-jest のバージョンが古かったようです。
こちらも同時にアップデートします。

Determining test suites to run...ts-jest[versions] (WARN) Version 5.2.2 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=3.8.0 <5.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.

package.json を修正する

package.json で指定されているバージョンを修正していきます。

:
"@types/jest": "^29.5.0",
"jest": "^29.7.0",
"ts-jest": "^29.1.0",
:

そして、 yarn install をし直して再度 test を実行します。
そうすると、下記のエラーが出力されました。

内容としては、

As of Jest 28 "jest-environment-jsdom" is no longer shipped by default

つまり、jest-environment-jsdom が Jest v28 からデフォルトで含まれなくなったそうです。
なので、こちらは個別にインストールします。

● 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.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1

jest-environment-jsdom とは何かについてはドキュメントに記述がありますのでこちらを参照してください。

jsdom と jest-environment-jsdom パッケージは、あたかもブラウザ内で実行しているような DOM 環境をシミュレートします。 これは我々が呼び出すあらゆる DOM API がブラウザで監視されているのと同じように監視されていることを意味します！

https://jestjs.io/ja/docs/next/tutorial-jquery

再実行する

再実行すると、さらに下記エラーが出力されました。

globals is deprecated

jest.config.js で設定する globals が非推奨となったようです。こちらもメッセージのように修正します。

$ jest --all --colors --silent=true
Determining test suites to run...ts-jest[ts-jest-transformer] (WARN) Define `ts-jest` config under `globals` is deprecated. Please do
transform: {
    <transform_regex>: ['ts-jest', { /* ts-jest config goes here in Jest */}],
},

jest.config.js の修正

globals の変わりに、transform 内に記述するように修正します。

globals: {
  'ts-jest': {
      tsconfig: {
        jsx: `react-jsx`,
     }
  }
}
修正後
transform: {
  '^.+\\.[tj]sx?$': [
    'ts-jest', {
      tsconfig: {
        jsx: `react-jsx`,
      },
    },
  ],
}

再々実行する

$ yarn test
yarn run v1.22.19
$ yarn test
$ jest --all --colors --silent=true

 RUNS  src/hooks/__tests__/useSomething.test.ts
 :

無事実行できました！

Discussion