モジュールと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フィードバックを取得できます。ローカル設定は不要です。