Storeとリアクティビティのテスト
Svelteのstoreを分離してテストし、導出値が正しく更新されることを確認します。
「Storeとリアクティビティのテスト」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
ストアの単体テスト
Svelte ストアをインポートし、更新後の値をアサートしてテストします。
import { count } from "$lib/stores";
import { get } from "svelte/store";
count.set(5);
expect(get(count)).toBe(5);get ヘルパー
get(store) は現在の値を同期的に読み取るため、テストで役立ちます。
テストでの subscribe
直接 subscribe して、発行されたすべての値を取得できます。
const values = [];
const unsub = count.subscribe(v => values.push(v));
count.set(1);
unsub();派生ストア
元の値を設定し、派生した出力を読み取って派生ストアをテストします。
カスタムストアメソッド
ストアのカスタムアクションを呼び出し、状態をアサートします。
非同期ストア
非同期ストアでは、マイクロタスクを await するか、フェイクタイマーを使用している場合は vi.runAllTimers を使用します。
テスト間のリセット
beforeEach でストアをリセットし、テスト間の状態の混入を防ぎます。
リアクティブなコンポーネント
コンポーネントをレンダリングし、テスト内でストアを subscribe して、リアクティブな更新を確認します。
コンポーネント内のストア
render、ストアの更新、アサーションを組み合わせて、リアクティブな一連の処理全体をテストします。
型安全性
TypeScript を使用すると、ストアの型がテストにも引き継がれ、安全なアサーションを行えます。
モック
コンポーネントのロジックをストアのデータから分離する場合は、ストアをモックします。
確認
テストでストアの値を読み取るにはどうしますか？
まとめ
get(store)、subscribe、beforeEach でのリセットを使用してストアをテストします。コンポーネントのテストでは render と組み合わせます。
よくある質問
「Storeとリアクティビティのテスト」レッスンは無料ですか？
はい。「Storeとリアクティビティのテスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「Storeとリアクティビティのテスト」で何を学びますか？
Svelteのstoreを分離してテストし、導出値が正しく更新されることを確認します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Storeとリアクティビティのテスト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。