0Pricing
Sveltejs Academy · レッスン

モジュールとFetchのモック

ユニットテストで外部モジュール、fetch呼び出し、SvelteKitモジュールをモックします。

「モジュールとFetchのモック」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

モックを使う理由

テストでは、テスト対象の単位を分離する必要があります。外部モジュールをモックして、ネットワーク呼び出しや不安定なテストを避けます。

vi.mock

Vitest には、モジュールを置き換えるための vi.mock が用意されています。

vi.mock("$lib/api", () => ({ getUser: () => ({ name: "Mock" }) }));

fetch のモック

vi.spyOn(global, "fetch") または msw のようなライブラリを使用して、現実的な API モックを作成します。

vi.spyOn(global, "fetch").mockResolvedValue({ json: () => ({ items: [] }) });

モジュールのホイスティング

vi.mock の呼び出しはホイスティングされます。ファイルの先頭で宣言してください。

モックの復元

afterEach 内で vi.restoreAllMocks() を使用して後処理を行います。

HTTP 用の MSW

Mock Service Worker はネットワーク層でインターセプトし、テストで現実的な API の動作を再現します。

SvelteKit モジュールのモック

$app/stores、$app/navigation、その他の SvelteKit インポートをモックして、分離されたテストを実行できます。

型安全なモック

型安全な spy を作成するには、型付きシグネチャで vi.fn() を使用します。

テスト間のクリア

vi.clearAllMocks() または beforeEach のセットアップを使用して、毎回初期状態から開始します。

部分モック

モジュールの特定のエクスポートだけをモックし、残りは実際のものを保持します。

実装とモックのトレードオフ

モックを使いすぎると、テストが意味を失う可能性があります。妥当な場合は実際の実装で統合テストを行ってください。

確認

vi.mock は何を行いますか?

まとめ

vi.mock と spy を使用して単位を分離し、ネットワーク層で現実的な API モックを作成する場合は MSW を検討してください。

よくある質問

「モジュールとFetchのモック」レッスンは無料ですか?

はい。「モジュールとFetchのモック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「モジュールとFetchのモック」で何を学びますか?

ユニットテストで外部モジュール、fetch呼び出し、SvelteKitモジュールをモックします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「モジュールとFetchのモック」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか?

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. SvelteプロジェクトでのVitestセットアップ
  2. @testing-library/svelte:renderとfireEvent
  3. Storeとリアクティビティのテスト
  4. モジュールとFetchのモック
← Sveltejs Academyに戻る