0Pricing
Sveltejs Academy · レッスン

SvelteプロジェクトでのVitestセットアップ

コンポーネントテスト用に、Svelteプラグインとjsdom環境を使ってVitestを設定します。

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

Vitest

Vitest は高速で Vite にネイティブ対応したテストランナーで、Svelte エコシステムで広く使用されています。

インストール

Vitest と Svelte プラグインを追加します。

npm install -D vitest @vitest/coverage-v8 @testing-library/svelte @testing-library/jest-dom jsdom

vite.config.js の設定

テストセクションを追加します。

export default defineConfig({
  plugins: [sveltekit()],
  test: { environment: "jsdom", globals: true, setupFiles: ["./vitest-setup.js"] }
});

セットアップファイル

vitest-setup.js で jest-dom のマッチャーをインポートします。

import "@testing-library/jest-dom";

テストの実行

package.json にスクリプトを追加して実行します。

"test": "vitest"

ウォッチモード

Vitest はデフォルトでウォッチモードになります。TDD に最適です。

TypeScript

Vitest は TypeScript を標準でサポートし、型を考慮したアサーションを使用できます。

カバレッジ

V8 カバレッジプロバイダーを使用して、カバレッジレポートを生成します。

npx vitest run --coverage

CI 統合

CI では、予測可能な実行結果を得るために、ウォッチモードではない vitest run を使用します。

スナップショットテスト

Vitest は Jest と同様にスナップショットをサポートし、リグレッションを検出できます。

IDE 統合

VS Code の Vitest 拡張機能を使用すると、エディターのコマンドからテストをインラインで実行できます。

確認

Vitest は DOM テストにどの環境を使用しますか？

まとめ

jsdom、Testing Library、jest-dom を使用して Vitest を設定し、高速な Svelte コンポーネントの単体テストを実行します。

よくある質問

「SvelteプロジェクトでのVitestセットアップ」レッスンは無料ですか？

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

「SvelteプロジェクトでのVitestセットアップ」で何を学びますか？

コンポーネントテスト用に、Svelteプラグインとjsdom環境を使ってVitestを設定します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「SvelteプロジェクトでのVitestセットアップ」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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