Reactテスト｜Jest + Babel + TypeScript + React 開発環境での落とし穴

はじめに

Jest + Babel + TypeScript + React 開発環境で、Reactのユニットテストを学習しようとしたところエラーを多数出した。
開発環境の整え方に問題があったため、記録としてエラー内容と解決した方法をまとめておくことに。

Reactユニットテスト学習記録は下記参照。

Reactユニットテスト｜Vite + React + Jest + React Testing Library の構成でReactユニットテストを学ぶ

⚠️エラーまとめ

❌ エラー1：Test environment jest-environment-jsdom cannot be found

• 原因：Jest v28 以降、jest-environment-jsdom が 外部パッケージ化され、デフォルトで含まれなくなった。
• 解決方法：

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

❌ エラー2：Cannot find module '@babel/preset-env'

• 原因：babel.config.js に @babel/preset-env を記述していたが、実際には未インストールだった。
• 解決方法：

  npm install --save-dev @babel/preset-env

❌ エラー3：Cannot find module '@babel/preset-react'

• 原因：JSX の構文変換に必要なプリセット @babel/preset-react を記述していたが、実際には未インストールだった
• 関連：TypeScriptも同時に使っているため、@babel/preset-typescript も必要。
• 解決方法：

npm install --save-dev @babel/preset-react @babel/preset-typescript

❌エラー4：ReferenceError: React is not defined

• 原因：JSXの変換方式が旧来の「React.createElement」を使う設定（＝runtime: 'classic'）になっており、import React from 'react' が必須になってしまう。
• 解決方法：

// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    ['@babel/preset-react', { runtime: 'automatic' }], // ← これが必要
    '@babel/preset-typescript',
  ],
};

✅ 全体まとめ：なぜこれらの設定が必要だったのか？

今回のプロジェクトでは Jest は Babel を使ってコードをトランスパイルしているため、以下の設定が必要だった：

// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',                            // モダンJSをES5などに変換
    ['@babel/preset-react', { runtime: 'automatic' }], // JSX構文変換
    '@babel/preset-typescript',                     // TypeScript構文変換
  ],
};

📝再発防止