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テスト｜Jest + Babel + TypeScript + React 開発環境での落とし穴

<h2 id="h99e47e4261">Jestとは</h2><p>JavaScript/TypeScriptアプリケーションのテストフレームワーク。<br>特に React アプリのユニットテストでよく使われており、Facebook（Meta）が開発・保守している。</p><h2 id="h6ec95de7eb">開発環境を準備｜Typescrip×Vite</h2><p>Viteで開発環境を準備して、Typescripのテストコードを作成してみる。</p><p>⚠️はじめに環境を準備する際、create-react-appをインストールしたところ、パッケージに非推奨が含まれていると警告があった。<br>create-react-app が非推奨のため使用するべきではないとのこと。→そのため今回はviteを使用することに。<br>作成したディレクトリは<code>rm -rf test-prac-ts</code>で削除。</p><h3 id="h69834930d2">①ディレクトリ作成</h3><p>ファイルを置きたいディレクトリ上で、vite最新版とtemplate react-ts（テンプレート）を使用してディレクトリ作成。<br>ディレクトリ名は 「test-prac-ts」とする。</p><pre><code>npm create vite@latest test-prac-ts -- --template react-ts</code></pre><p>⚠️注意：ts-jestが対応しているTypeScriptのバージョンは、4.3.0 - 5.0.0までとエラーが表示された。＞プロジェクトにインストールしていたTypeScriptのバージョンが5.8.3だったため4.9.5にダウングレード。<code>npm install -D typescript@4.9.5</code></p><h3 id="hd4a7e7a366">②プロジェクトにJestをインストール</h3><p>作成したディレクトリtest-prac-tsへ移動し、Jestをインストール。</p><pre><code>npm install --save-dev jest@^28.0.0 ts-jest@^28.0.0 @types/jest@^28.0.0</code></pre><p>JestをTypeScriptで使用するのに、必要なパッケージ</p><ul><li>jest・・・jest本体</li><li>ts-jest・・・JestをTypeScriptに対応させるためのもの</li><li>@types/jest・・・JestのAPIの型定義ファイル</li></ul><h3 id="hf7416712dc"><strong>③Jestの設定ファイルを作る</strong></h3><p>そのまま使用はできないため、JestでTypeScriptコードがテストできるように設定を加える。</p><pre><code>npx ts-jest config:init</code></pre><h3 id="h3d7a52cda9">④pakage.jsonに2つの設定を加える</h3><p><u>✅①scriptsにjestを追記</u><br>ここにセットすることで、<code>npm run test</code> をしたときにJestが起動する。</p><pre><code> &quot;scripts&quot;: {
    &quot;test&quot;: &quot;jest&quot;
  },</code></pre><p><u>✅②type&quot;: &quot;module&quot;を削除</u></p><p>pakage.jsonに初期状態で記載されている<code>type&quot;: &quot;module&quot;</code>を削除する。</p><p>type&quot;: &quot;module&quot;のまま、<code>npm run test </code>を行なったところ、「ReferenceError: module is not defined」が表示されたため。<br>原因はjest.config.jsの記述がCommonJSなのに対して、&quot;type&quot;: &quot;module&quot;はES Modules(ESM)を指しているのでエラーが生じた。<br>削除することで解決。</p><h3 id="h63a3b6ca23">⑤tsconfig.jsonの設定</h3><p>tsconfig.jsonにesModuleInterop を trueを追記。</p><pre><code>{
  &quot;compilerOptions&quot;: {
    &quot;esModuleInterop&quot;: true,
  }</code></pre><p>Node.js や多くのライブラリは CommonJS 形式（module.exports や require）を使用しているけれど、TypeScript は標準的には ES Modules（export, import）を使う。</p><p><code>import * as express from &apos;express&apos;;</code>→<code>import express from &apos;express&apos;;</code></p><p>この書き方を許可するのが esModuleInterop: true の目的。</p><h2 id="h36b1289d07"><strong>Jestが動くかを確認</strong></h2><h3 id="h7cdfbcd2e4">🔸関数を記述したファイルを準備｜src/calc.ts</h3><pre><code class="language-typescript">export const sum = ((a: number, b: number) =&gt; {
  return a + b;
});</code></pre><h3 id="h5c68f589c4">🔸テスト用ファイルを準備｜calc.test.ts</h3><p>テスト用のファイルの命名には規則がある。<br>Jest は<code>.test.ts</code>や <code>.spec.ts</code>のファイルを自動的に見つけて実行する。</p><p>そのためファイルの名は<code>〇〇.test.ts</code>などにする必要がある。</p><pre><code class="language-typescript">import { sum } from &quot;./calc&quot;

test (&apos;result should be 2&apos;, () =&gt; {
  expect(sum(1,1)).toBe(2);
});</code></pre><p>先ほど作成した関数のファイル、src/calc.tsからsum関数をインポート。<br>&apos;result should be 2&apos;は、テストの名前を任意でつける。<br><br>expect()とマッチャー（今回は.toBe()）を合わせて期待通りか確認する。<br>「sum(1,1)の引数を渡すと、sum関数内で計算されてその結果は2を期待する」とテストする。</p><h3 id="h094a2a0840">📝テスト構文の基本構文</h3><p>①、②どちらもテストケースを定義する関数で、機能は同じとなる。</p><pre><code>①  test(&quot;1 + 2 equals 3&quot;, () =&gt; { ... });

②  it(&quot;should return 3&quot;, () =&gt; { ... });</code></pre><h3 id="h59dcda36a7">🔸テストを実行してみる</h3><p><code>npm run test </code></p><h3 id="h3e943e3d56">🔸テスト結果をチェック</h3><p>テストをすると下記がターミナルに表示させる。</p><pre><code>PASS  src/calc.test.ts
  ✓ result should be 2

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.834 s, estimated 1 s</code></pre><p>期待通りのテストの結果になっている✅</p><hr><h2 id="hd962bf67cf">マッチャー（matchers）</h2><p>Jestでよく使われるマッチャー（matchers）は、テストの「期待値」を確認するための関数で、たくさんある。<br>テスト内容に合わせて使用する。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>マッチャー</p></th><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>toBe</code></p></td><td colspan="1" rowspan="1"><p>厳密な等価性（<code>===</code>）を確認</p></td><td colspan="1" rowspan="1"><p>expect(1 + 1).toBe(2)</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>toEqual</code></p></td><td colspan="1" rowspan="1"><p>オブジェクトや配列の値の等価性</p></td><td colspan="1" rowspan="1"><p>expect({a: 1}).toEqual({a: 1})</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>toBeNull</code></p></td><td colspan="1" rowspan="1"><p><code>null</code> であることを確認</p></td><td colspan="1" rowspan="1"><p>expect(null).toBeNull()</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>toBeUndefined</code></p></td><td colspan="1" rowspan="1"><p><code>undefined</code> であることを確認</p></td><td colspan="1" rowspan="1"><p>expect(undefined).toBeUndefined()</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>toBeTruthy</code></p></td><td colspan="1" rowspan="1"><p>真であることを確認</p></td><td colspan="1" rowspan="1"><p>expect(&quot;hello&quot;).toBeTruthy()</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>toBeFalsy</code></p></td><td colspan="1" rowspan="1"><p>偽であることを確認</p></td><td colspan="1" rowspan="1"><p>expect(0).toBeFalsy()</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>toContain</code></p></td><td colspan="1" rowspan="1"><p>配列に特定の要素が含まれるか確認</p></td><td colspan="1" rowspan="1"><p>expect([&quot;apple&quot;, &quot;banana&quot;]).toContain(&quot;banana&quot;)</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>toThrow</code></p></td><td colspan="1" rowspan="1"><p>関数が例外を投げるか確認</p></td><td colspan="1" rowspan="1"><p>expect(() =&gt; { throw new Error(&quot;error&quot;); }).toThrow()</p></td></tr></tbody></table>

TypeScriptVite環境でテストコードの書くときの環境構築と基本的なテストコードの書き方

Jestテスト｜TypeScript×Vite環境でJestを使ってテストコードを書く

<h2 id="h3d1546bbbf">「beforeEach＆afterEach」とは？</h2><p>Jestの beforeEach と afterEach は、各テストの前後に毎回実行される処理を定義するための関数。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>関数</p></th><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>beforeEach</code></p></td><td colspan="1" rowspan="1"><p><strong>各テストの直前に実行</strong></p></td><td colspan="1" rowspan="1"><p>毎回共通で使う準備処理（変数の初期化・モックのリセットなど）</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>afterEach</code></p></td><td colspan="1" rowspan="1"><p><strong>各テストの直後に実行</strong></p></td><td colspan="1" rowspan="1"><p>クリーンアップ処理（DBやファイルの後始末、モックの解除など）</p></td></tr></tbody></table><h2 id="h10463d71f9">基本の使い方</h2><h3 id="h4ada949954">🔸テスト対象のモジュール｜counter.ts</h3><pre><code class="language-typescript">let count = 0;

export const increment = () =&gt; {
  count += 1;
};

export const decrement = () =&gt; {
  count -= 1;
};

export const reset = () =&gt; {
  count = 0;
};

export const getCount = () =&gt; {
  return count;
};</code></pre><h3 id="h8486cfeb17">🔸テストコード｜counter.test.ts</h3><pre><code class="language-typescript">// counter.test.ts
import { increment, decrement, reset, getCount } from &apos;./counter&apos;;

beforeEach(() =&gt; {
  // 各テスト前にカウントをリセットしておく
  reset();
});

afterEach(() =&gt; {
  // 各テスト後に現在の値をログに出力
  console.log(&apos;現在のカウント:&apos;, getCount());
});

test(&apos;increment 関数で +1 される&apos;, () =&gt; {
  increment();
  expect(getCount()).toBe(1);
});

test(&apos;decrement 関数で -1 される&apos;, () =&gt; {
  decrement();
  expect(getCount()).toBe(-1);
});

test(&apos;reset 関数で 0 に戻る&apos;, () =&gt; {
  increment();
  increment();
  reset();
  expect(getCount()).toBe(0);
});</code></pre><h3 id="hbe368aeb20">✅テスト通過時</h3><pre><code> PASS  counter.test.ts
  ✓ increment 関数で +1 される
  ✓ decrement 関数で -1 される
  ✓ reset 関数で 0 に戻る

  console.log
    現在のカウント: 1
  console.log
    現在のカウント: -1
  console.log
    現在のカウント: 0</code></pre><hr><h2 id="h362c9aebf9">よくある使い方</h2><h3 id="h48af2a325e">🔸モックの初期化</h3><pre><code class="language-typescript">let mockFn: jest.Mock;

beforeEach(() =&gt; {
  mockFn = jest.fn(); // テストごとに新しいモック関数を準備
});

test(&apos;関数が1回呼ばれる&apos;, () =&gt; {
  mockFn();
  expect(mockFn).toHaveBeenCalledTimes(1);
});</code></pre><h3 id="h67fac66e43">🔸DOMやタイマーのクリーンアップ（ReactやsetTimeoutなど）</h3><pre><code class="language-typescript">beforeEach(() =&gt; {
  jest.useFakeTimers(); // タイマーをモックに置き換え
});

afterEach(() =&gt; {
  jest.runOnlyPendingTimers(); // 残ったタイマー処理を実行
  jest.useRealTimers();        // タイマーを元に戻す
});</code></pre>

Jestテストの初期設定と後処理で使用される「beforeEach＆afterEach」とは？

Jestテスト｜テストの初期設定と後処理beforeEach＆afterEach

<h2 id="h8289bf5728">モック（Mock）とは？</h2><p>実際の関数やAPIなどの「本物の処理の代わりに使うダミー（偽物）」のこと。<br>Mockを使用すると、下記のようなことができるようになる。</p><ul><li>外部APIなどテスト時に呼びたくない処理を回避する</li><li>未実装の関数でも先にテストできる</li><li>関数の呼び出し状況を検証できる</li></ul><h3 id="h57372cbb5e">モックの「作り方」にはいくつかある</h3><p>🛠 よく使うモックの作り方：</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.fn()</code></p></td><td colspan="1" rowspan="1"><p>自分でゼロからモック関数を作る</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>jest.spyOn(obj, &apos;method&apos;)</code></p></td><td colspan="1" rowspan="1"><p>すでにある関数の動きを監視・モック化する</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>jest.mock(&apos;モジュール&apos;)</code></p></td><td colspan="1" rowspan="1"><p>ファイル・モジュール全体をモックに置き換える</p></td></tr></tbody></table><hr><h2 id="h77bc77ad7b">jest.fn()</h2><p>未実装の関数を仮で作ってテストしたいときや、外部の関数の代わりにテスト用の関数を使いたいときに便利。</p><h3 id="h7448667c74">🔸①テスト対象のモジュール｜apiHandler.ts</h3><p>例として、データ取得後に処理（callback）を呼ぶ関数fetchDataを作成。</p><pre><code class="language-typescript">export function fetchData(callback: (data: string) =&gt; void) {
  // ここは本来、APIからデータ取得処理などがある想定
  // 今は簡単に即時でコールバック呼び出し
  callback(&apos;取得したデータ&apos;);
}</code></pre><ul><li><code>callback</code> は引数で、関数を受け取る形。つまり <code>fetchData</code> に「こういう処理をしてね」という<strong>関数を渡す</strong>ことができる。</li><li><code>fetchData</code> の中で、その <code>callback</code> 関数を呼び出すとき、<code>&apos;取得したデータ&apos;</code> という文字列を引数として渡す。</li></ul><h3 id="hae5f7a4494">🔸②これを使う関数｜dataProcessor.ts</h3><pre><code class="language-typescript">import { fetchData } from &apos;./apiHandler&apos;;

export function processData() {
  fetchData((result) =&gt; {
    console.log(&apos;データ処理中:&apos;, result);
  });
}</code></pre><ul><li>ここで <code>fetchData</code> に渡しているのは、匿名関数（無名関数）。<code>(result) =&gt; {console.log(&apos;データ処理中:&apos;, result);  }</code>がその関数。</li><li>この無名関数は <strong>「fetchDataが呼び出すコールバック関数」</strong> になる。</li><li><code>result</code> は、このコールバック関数の引数。</li><li><code>fetchData</code>関数内で、コールバック関数として呼び出されたこの匿名関数は、引数として&apos;取得したデータ&apos;を渡されている。そのため<code>result = &apos;取得したデータ&apos;</code>となる。</li></ul><h3 id="h9db62da97e">🔸③テストコード｜fetchData.test.ts</h3><ul><li><code>fetchData</code> が ちゃんとコールバックを呼んでいるか</li><li>コールバックが<strong> </strong>正しい引数で呼ばれているか</li></ul><pre><code class="language-typescript">import { fetchData } from &apos;./apiHandler&apos;;

test(&apos;fetchDataはコールバックを正しい引数で呼ぶ&apos;, () =&gt; {
  const mockCallback = jest.fn(); // 空のモック関数を作成

  fetchData(mockCallback); // モック関数をコールバックに渡して実行

  // 関数が1回以上呼ばれたかチェック
  expect(mockCallback).toHaveBeenCalled();

  // 呼ばれた時の引数が &apos;取得したデータ&apos; かチェック
  expect(mockCallback).toHaveBeenCalledWith(&apos;取得したデータ&apos;);
});</code></pre><hr><h2 id="haf0a2da858">jest.spyOn()</h2><ul><li>既存のモジュールの 特定の関数（メソッド）を監視（spy） できる</li><li>元の関数の実装を一時的に「監視」し、呼び出し状況を記録できる</li><li>必要に応じて、元の実装を「モック（差し替え）」することもできる</li></ul><h3 id="hf9f1ed8f51">🔸①テスト対象のモジュール｜logger.ts</h3><pre><code class="language-typescript">export const logger = {
  log: (message: string) =&gt; {
    console.log(&apos;Log:&apos;, message);
  }
};</code></pre><h3 id="h4e2396cae1">🔸②これを使う関数｜app.ts</h3><pre><code class="language-typescript">import { logger } from &apos;./logger&apos;;

export function greetUser(name: string) {
  logger.log(`Hello, ${name}!`);
}</code></pre><h3 id="h5b34a8edc5">🔸③テストコード｜logger.test.ts</h3><ul><li><code>greetUser</code> を呼んだ時に<code>logger.log</code> が 正しく呼ばれたか</li><li>呼ばれた時の引数は<strong> </strong>期待どおりか</li></ul><pre><code class="language-typescript">import * as loggerModule from &apos;./logger&apos;;
import { greetUser } from &apos;./app&apos;;

test(&apos;greetUserはlogger.logを正しい引数で呼ぶ&apos;, () =&gt; {
  // logger.log を監視（spy）しつつ、実装は差し替えない（本来のconsole.logは呼ばれる）
  const spy = jest.spyOn(loggerModule.logger, &apos;log&apos;);

  greetUser(&apos;Yamada&apos;);

  // spyが呼ばれたかチェック
  expect(spy).toHaveBeenCalled();

  // spyが呼ばれたときの引数をチェック
  expect(spy).toHaveBeenCalledWith(&apos;Hello, Yamada!&apos;);

  spy.mockRestore(); // 監視解除（後続のテストに影響しないように）
});</code></pre><hr><h2 id="hd5e7e32b2f">jest.mock()</h2><ul><li>モジュール全体を丸ごとモック（偽物）に差し替えるための関数</li><li>本物の実装を使わずに、テスト用のダミー実装を指定できる</li><li>外部APIやファイル読み込みなど、テスト環境で動かしたくない処理を差し替えるのに便利</li></ul><h3 id="h5b234f5823">🔸①テスト対象のモジュール｜api.ts</h3><pre><code class="language-typescript">export const fetchData = async () =&gt; {
  const response = await fetch(&apos;https://example.com/data&apos;);
  const data = await response.json();
  return data.message;
};</code></pre><h3 id="h4e2396cae1">🔸②これを使う関数｜app.ts</h3><pre><code class="language-typescript">import { fetchData } from &apos;./api&apos;;

export async function showMessage() {
  const message = await fetchData();
  return `メッセージ: ${message}`;
}</code></pre><h3 id="h06e5e54bc6">🔸③テストコード｜api.test.ts</h3><ul><li>テスト時に実際の外部通信（fetch）を行いたくない</li><li><code>fetchData</code> の戻り値を自由にコントロールしたい</li></ul><pre><code class="language-typescript">// app.test.ts
jest.mock(&apos;./api&apos;, () =&gt; ({
  fetchData: jest.fn().mockResolvedValue(&apos;モックのメッセージ&apos;)
}));

import { fetchData } from &apos;./api&apos;;
import { showMessage } from &apos;./app&apos;;

test(&apos;showMessageはモックデータを返す&apos;, async () =&gt; {
  const result = await showMessage();

  expect(fetchData).toHaveBeenCalled(); // fetchDataが呼ばれたかチェック
  expect(result).toBe(&apos;メッセージ: モックのメッセージ&apos;);
});</code></pre><p></p>

Jestテストにおけるモック（Mock）とは？

Jestテスト｜モック（Mock）を活用したテストコードの書き方

<h2 id="h5d29b5b413">非同期処理のテスト</h2><p>API通信、タイマー処理などを含む関数を正しく検証するには、Promiseの完了を待つ・コールバックが呼ばれたことを確認するなど、同期的なテストとは異なる配慮が必要となってくる。</p><p>特に配慮せずテストコードを書くと、Jestテストでは非同期処理が完了するのを待たずにテストが終わってしまうことがある。</p><h2 id="ha42408ccb9">非同期処理Promise｜成功パターン</h2><h3 id="h114cbed7bb">🔸テスト対象のサンプルコード｜asyncFunction.ts</h3><p>下記関数waitAndReturn()は、1秒後に 完了しました という文字列を返す。<br>Promiseは成功するとresolveを返す。</p><pre><code class="language-typescript">export const waitAndReturn = (): Promise&lt;string&gt; =&gt; {
  return new Promise((resolve) =&gt; {
    setTimeout(() =&gt; {
      resolve(&apos;完了しました&apos;);
    }, 1000);
  });
};</code></pre><h3 id="had87dc1ae6">🔸テストコード｜asyncFunction.test.ts</h3><pre><code class="language-typescript">import { waitAndReturn } from &apos;./asyncFunction&apos;;

test(&apos;waitAndReturnは「完了しました」を返す&apos;, async () =&gt; {
  const result = await waitAndReturn(); // 非同期処理が終わるのを待つ
  expect(result).toBe(&apos;完了しました&apos;);
});</code></pre><p>test 関数のコールバックに async を付け、関数の呼び出しに await を使い非同期処理が終わるのを待つ。<br>そして最後にexpect で結果を確認。</p><hr><h2 id="h09fcff09bb">非同期処理Promise｜失敗パターン</h2><h3 id="hfcfd5658e4">🔸テスト対象のサンプルコード｜rejectFunction.ts</h3><p>関数willFail()は、1秒後に エラーです という文字列を返す。<br>Promiseは失敗するとrejectを返す。</p><pre><code class="language-typescript">export const willFail = (): Promise&lt;string&gt; =&gt; {
  return new Promise((resolve, reject) =&gt; {
    setTimeout(() =&gt; {
      reject(&apos;エラーです&apos;);
    }, 1000);
  });
};</code></pre><h3 id="h2a78e0cdc3">🔸テストコード｜rejectFunction.test.ts</h3><pre><code class="language-typescript">import { willFail } from &apos;./rejectFunction&apos;;

test(&apos;willFailはエラーを返す&apos;, async () =&gt; {
  await expect(willFail()).rejects.toBe(&apos;エラーです&apos;);
});</code></pre><p> 上記の<code> expect(...).rejects.toBe(...) </code>は、Promise がエラーになる（rejectされる）ことを期待する書き方。</p><hr><h2 id="hb06406043d">タイマーを使った関数とテスト（基本）</h2><h3 id="hb47069b98e">🔸テスト対象のサンプルコード｜timeoutCallback.ts</h3><p>関数callAfterDelayは1秒後に callback();のコールバック関数を呼び出す。</p><pre><code class="language-typescript">export const callAfterDelay = (callback: () =&gt; void) =&gt; {
  setTimeout(() =&gt; {
    callback();
  }, 1000);
};</code></pre><p>📝(callback: () =&gt; void) の書き方について</p><p>「callback」は引数（コールバック関数）の名前。「: () =&gt; void」はこの引数が「引数なし・戻り値なしの関数」であるという型の指定<br>分解すると…</p><pre><code class="language-typescript">type CallbackFunction = () =&gt; void;

export const callAfterDelay = (callback: CallbackFunction) =&gt; {
  // ...
};</code></pre><h3 id="h96067d7f4c">🔸テストコード｜timeoutCallback.test.ts</h3><p>done()を使用する。done()は非同期処理が終わったことをJestに知らせるための関数。<br>これを呼び忘れるとテストがタイムアウトする。</p><pre><code class="language-typescript">import { callAfterDelay } from &apos;./timeoutCallback&apos;;

test(&apos;1秒後にコールバックが呼ばれる&apos;, (done) =&gt; {
  callAfterDelay(() =&gt; {
    expect(true).toBe(true); // とりあえず確認用
    done(); // テスト完了をJestに通知
  });
});</code></pre><p>done() の役割：</p><p><code>test()</code> の中は 同期的 or<strong> </strong><code>async/await</code> を使う場合、Jestが自動でテスト完了を検知できる。<br>しかし、コールバック関数を使って非同期処理する場合、Jestはテストが「まだ終わっていない」と分からない。そのため、Jestに「今終わりました！」と手動で知らせる必要がある。</p><hr><h2 id="h06767b2fdf">✅まとめ</h2><h3 id="h0357e0790d">🔸非同期処理のテストの特徴</h3><ul><li><code>async / await</code> や <code>Promise</code> を直接扱う。</li><li>非同期関数の <strong>結果が正しいかどうか（成功 / エラー）</strong> をテスト。</li></ul><h3 style="text-align: start" id="hfcddb6e915">🔸タイマーを使ったテストの特徴</h3><ul><li><code>setTimeout</code> や <code>setInterval</code> を使った「一定時間後に起きる処理」が対象。</li><li><strong>コールバックが呼ばれるかどうか</strong> を確認する。</li><li>Jestの<strong>タイマー制御API</strong>（<code>jest.useFakeTimers()</code> など）を使うと効率的。</li></ul><table><tbody><tr><th colspan="1" rowspan="1"><p>種類</p></th><th colspan="1" rowspan="1"><p>主な目的</p></th><th colspan="1" rowspan="1"><p>代表的な書き方例</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>① 非同期処理のテスト</strong></p></td><td colspan="1" rowspan="1"><p>Promise の <strong>成功 / 失敗</strong> を確認</p></td><td colspan="1" rowspan="1"><p><code>await</code>, <code>expect(...).resolves</code> / <code>rejects</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>② タイマーを使ったテスト</strong></p></td><td colspan="1" rowspan="1"><p><strong>時間経過後に何かが実行されるか</strong> を確認</p></td><td colspan="1" rowspan="1"><p><code>setTimeout</code>, <code>jest.useFakeTimers()</code> など</p></td></tr></tbody></table>

非同期処理の場合のテストコードの書き方を学ぶ

テスト

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

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

Jestテスト｜TypeScript×Vite環境でJestを使ってテストコードを書く

Jestテスト｜テストの初期設定と後処理beforeEach＆afterEach

Jestテスト｜モック（Mock）を活用したテストコードの書き方

Jestテスト｜Jestで非同期処理のテストをする