React + TypeScripの開発環境でユニットテストを書いてみる

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

<h2 id="h8d027c8ed3">はじめに</h2><p>Jest + Babel + TypeScript + React 開発環境で、Reactのユニットテストを学習しようとしたところエラーを多数出した。<br>開発環境の整え方に問題があったため、記録としてエラー内容と解決した方法をまとめておくことに。</p><p>Reactユニットテスト学習記録は下記参照。</p><p><a href="/blogs/test-react-testing-library" target="_blank" rel="noopener noreferrer">Reactユニットテスト｜Vite + React + Jest + React Testing Library の構成でReactユニットテストを学ぶ</a></p><h2 id="h2b7bf3de4b">⚠️エラーまとめ</h2><h3 style="text-align: start" id="h27da6b6af6">❌ エラー1：Test environment jest-environment-jsdom cannot be found</h3><ul><li><strong>原因</strong>：Jest v28 以降、<code>jest-environment-jsdom</code> が <strong>外部パッケージ化</strong>され、デフォルトで含まれなくなった。</li><li><strong>解決方法</strong>：<pre><code>npm install --save-dev jest-environment-jsdom</code></pre></li></ul><h3 id="h123258f9ae"><strong>❌ エラー2：Cannot find module &apos;@babel/preset-env&apos;</strong></h3><ul><li><strong>原因</strong>：<code>babel.config.js</code> に <code>@babel/preset-env</code> を記述していたが、実際には未インストールだった。</li><li><strong>解決方法</strong>：<pre><code>npm install --save-dev @babel/preset-env</code></pre></li></ul><h3 id="hff5d6d2148">❌ エラー3：Cannot find module &apos;@babel/preset-react&apos;</h3><ul><li><strong>原因</strong>：JSX の構文変換に必要なプリセット <code>@babel/preset-react</code> を記述していたが、実際には未インストールだった</li><li><strong>関連</strong>：TypeScriptも同時に使っているため、<code>@babel/preset-typescript</code> も必要。</li><li><strong>解決方法</strong>：</li></ul><pre><code>npm install --save-dev @babel/preset-react @babel/preset-typescript</code></pre><h3 id="h6ff030393e"><br><strong>❌</strong>エラー4：ReferenceError: React is not defined</h3><ul><li><strong>原因</strong>：JSXの変換方式が旧来の「React.createElement」を使う設定（＝runtime: &apos;classic&apos;）になっており、import React from &apos;react&apos; が必須になってしまう。</li><li><strong>解決方法</strong>：</li></ul><pre><code class="language-javascript">// babel.config.js
module.exports = {
  presets: [
    &apos;@babel/preset-env&apos;,
    [&apos;@babel/preset-react&apos;, { runtime: &apos;automatic&apos; }], // ← これが必要
    &apos;@babel/preset-typescript&apos;,
  ],
};</code></pre><h2 id="ha41c3467fc">✅ 全体まとめ：なぜこれらの設定が必要だったのか？</h2><p>今回のプロジェクトでは Jest は Babel を使ってコードをトランスパイルしているため、以下の設定が必要だった：</p><pre><code class="language-javascript">// babel.config.js
module.exports = {
  presets: [
    &apos;@babel/preset-env&apos;,                            // モダンJSをES5などに変換
    [&apos;@babel/preset-react&apos;, { runtime: &apos;automatic&apos; }], // JSX構文変換
    &apos;@babel/preset-typescript&apos;,                     // TypeScript構文変換
  ],
};</code></pre><p><strong><u>📝再発防止</u></strong></p><table><tbody><tr><th colspan="1" rowspan="1"><p>チェック項目</p></th><th colspan="1" rowspan="1"><p>備考</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>jest-environment-jsdom</code> をインストールしているか</p></td><td colspan="1" rowspan="1"><p><code>testEnvironment: &apos;jsdom&apos;</code> 用</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>babel.config.js</code> に presets を定義しているか</p></td><td colspan="1" rowspan="1"><p>env / react / typescript の3点</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>@babel/preset-env</code> が入っているか</p></td><td colspan="1" rowspan="1"><p>変換対象環境の指定に必要</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>@babel/preset-react</code> で <code>runtime: &apos;automatic&apos;</code> を指定しているか</p></td><td colspan="1" rowspan="1"><p><code>import React</code> を不要に</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>@babel/preset-typescript</code> を使っているか</p></td><td colspan="1" rowspan="1"><p>BabelでTSを扱うなら必要</p></td></tr></tbody></table>

開発環境でハマったエラーをまとめてみた

React Testing Library

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

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