FetchとTimerのMock
fetch mockでネットワークをstubし、fake timerで時間を制御して、非同期component向けの安定した高速なテストを書きます。
「FetchとTimerのMock」はCoddyKit上の無料React Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
ネットワークと時間をモックする理由
目標：非同期処理をモックして、テストを高速で信頼性の高いものにします。
- fetchのレスポンスをスタブします
- フェイククロックでタイマーを制御します
- findBy*/waitForを使ってアサートします
一般的なパターン
- fetch：global.fetchをspyOn → mockResolvedValue
- タイマー：vi.useFakeTimers(); タイマーを進めます
- 非同期DOMにはfindBy*を優先します
デモ：クリックでfetchするウィジェット
テストではfetchをモックして、データを即座に返します。ここではsetTimeoutを使って、UIが遅いfetchをシミュレーションします。
<div id="root"></div>
デモ：タイマーによるメッセージ
テストではフェイクタイマーを使用して待機を省略します。時間を進めて、メッセージをアサートします。
<div id="root"></div>
リファレンス：テストスニペット
参照用のテストスニペットです（表示のみ）。Vitestでfetchをスパイし、フェイクタイマーを使用します。
<div id="root"></div>
ヒントと注意点
- スパイをクリーンアップします：各テストの後にmockRestoreを実行します
- 非同期UIにはfindBy*を使用します
- useRealTimersで実際のタイマーに戻します
タイマーのテストに関するベストプラクティス
まとめ
まとめ：fetchをモックしてレスポンスを制御し、フェイクタイマーで時間を即座に進めます。安定した非同期テストにはfindBy*/waitForでアサートします。
よくある質問
「FetchとTimerのMock」レッスンは無料ですか？
はい。「FetchとTimerのMock」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「FetchとTimerのMock」で何を学びますか？
fetch mockでネットワークをstubし、fake timerで時間を制御して、非同期component向けの安定した高速なテストを書きます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「FetchとTimerのMock」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。