Jest v29 アップグレードで発生する「Test environment jest-environment-jsdom cannot be found」エラーの解決方法

Jest v29へのアップグレードで発生する「Test environment jest-environment-jsdom cannot be found」エラーの解決方法

Jest v29へのアップグレードに伴い、従来デフォルトで組み込まれていたjest-environment-jsdomパッケージが削除されました。このため、jsdom環境でテストを実行する場合、以下の手順で手動でインストールと設定を行う必要があります。

エラー内容

Jest v29でテストを実行しようとすると、以下のエラーが発生します。

Error: Test environment jest-environment-jsdom cannot be found.

Ensure that jest-environment-jsdom is installed and configured correctly.

解決手順

1. jest-environment-jsdomとjsdomパッケージをインストール

npm install jest-environment-jsdom jsdom

1. Jest設定ファイル（jest.config.js）を編集

以下の設定をjest.config.jsファイルに追加します。

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
};

補足

• TypeScriptを使用している場合は、ts-jestプリセットをインストールする必要があります。

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
};

// example.test.ts
import { expect } from '@jest/globals';

test('サンプルテスト', () => {
  expect(1).toBe(1);
});

上記のコードは、Jest v29でjsdom環境でテストを実行するための設定とサンプルテストコードです。

jest.config.js

• preset: 'ts-jest': TypeScript用のJestプリセットを設定します。
• testEnvironment: 'jest-environment-jsdom': テスト実行環境をjsdomに設定します。

example.test.ts

• import { expect } from '@jest/globals';: Jestのexpect関数を読み込みます。
• test('サンプルテスト', () => {}): テストケースを定義します。
• expect(1).toBe(1);: 1と1が等しいことを検証します。

このサンプルコードを参考に、ご自身のテストコードをjsdom環境で実行できるように設定してください。

Jest v29でのjsdom環境テスト：代替手段

jest-environment-puppeteer

• 利点:
  • 本物のChromiumブラウザを使用してテストを実行するため、より現実的なテスト結果を得ることができます。
  • ヘッドレスモードとフルヘッドレスモードの両方をサポートしています。
• 欠点:
  • puppeteerパッケージのインストールと設定が必要となります。
  • jest-environment-jsdomよりも動作が重くなる可能性があります。

jest-fake-dom

• 利点:
  • 軽量で高速なjsdom環境を提供します。
• 欠点:

手動でjsdomをセットアップ

• 利点:
• 欠点:
  • 複雑な設定が必要となります。
  • テストコードの保守が難しくなる可能性があります。

各代替手段の比較表

最適な代替手段は、テストの要件と開発者の好みによって異なります。

• より現実的なテスト結果が必要な場合は、jest-environment-puppeteerがおすすめです。
• 軽量で高速なテスト環境が必要な場合は、jest-fake-domがおすすめです。
• 完全な制御が必要な場合は、手動でjsdomをセットアップする方法がおすすめです。