テストフレームワーク入門
Vueのテスト環境とツールについて学びます。
「テストフレームワーク入門」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
なぜテストするのか
自動テストは、ユーザーが見つける前にバグを検出し、コードがどのように動作すべきかを記録し、自信を持ってリファクタリングできるようにします。アプリが成長するほど、手作業で確認せずに品質を維持するためにテストが不可欠になります。
3種類のテスト
テストには主に3つのレベルがあります。unitテストは小さな部分を単独で確認し、integrationテストは複数の部分が連携して動作することを確認し、end-to-end（e2e）テストは実際のユーザーのようにアプリ全体を操作します。
ユニットテスト
ユニットテストは、依存関係をモックしたうえで、1つの関数またはコンポーネントを単独で検証します。実行が速く、どこが壊れたのかを正確に特定できます。テストの大部分はユニットテストにしてください。
function add(a, b) {
return a + b
}
test("add sums two numbers", () => {
expect(add(2, 3)).toBe(5)
})統合テスト
統合テストは、複数のユニットが正しく連携することを確認します。たとえば、コンポーネントとそのストアの組み合わせや、APIラッパーを呼び出すフォームなどです。ユニットテストだけでは見つけられない接続部分の問題を検出できます。
エンドツーエンドテスト
e2eテストでは実際のブラウザーを起動し、ユーザーと同じようにアプリをクリックして操作します。最も現実に近いテストですが、実行が最も遅く壊れやすいため、数は少なめにします。
テストピラミッド
テストピラミッドでは、土台に多数の高速なユニットテストを置き、中段に少数の統合テスト、頂点に少数のe2eテストを置く構成が推奨されます。これにより、信頼性と速度のバランスを取れます。
Vitest
Vitestは、Viteベースのプロジェクト向けに作られた高速で現代的なテストランナーです。Jest互換のAPIを備え、Viteで構築したVue 3アプリケーションとシームレスに連携します。
npm install -D vitestJest
Jestは、JavaScriptエコシステムで広く使われてきた、長い歴史を持つテストランナーです。VitestはそのAPI（describe、test、expect）に合わせているため、知識を相互に活用できます。
describe("math", () => {
test("adds", () => {
expect(1 + 1).toBe(2)
})
})Vue Test Utils
Vue Test Utilsは、Vueコンポーネントをユニットテストするための公式ライブラリです。テスト環境でコンポーネントをマウントし、操作したり出力を検証したりできます。
npm install -D @vue/test-utilsCypressとPlaywright
e2eテストには、CypressとPlaywrightがよく使われます。実際のブラウザーを自動操作できるため、クリック、入力、ページ遷移をスクリプト化し、ユーザーに表示される内容を検証できます。
テストスタックを選ぶ
一般的なVue 3の構成では、ユニットテストとコンポーネントテストにVitestとVue Test Utilsを使い、e2eテストにはCypressまたはPlaywrightを使います。この組み合わせで、現代的で十分にサポートされているツールによってテストピラミッド全体をカバーできます。
確認テスト
テストフレームワークについての知識を確認しましょう。
まとめ
テストには、ユニット、統合、e2eの3つのレベルがあり、テストピラミッドによってバランスを取ります（ユニットテストは多く、e2eテストは少なくします）。現代的なVueのテックスタックでは、ユニットテストにVitestまたはJestとVue Test Utilsを使い、e2eテストにCypressまたはPlaywrightを使います。次はVue Test Utilsを使って実際のユニットテストを書きます。
よくある質問
「テストフレームワーク入門」レッスンは無料ですか？
はい。「テストフレームワーク入門」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「テストフレームワーク入門」で何を学びますか？
Vueのテスト環境とツールについて学びます。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「テストフレームワーク入門」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- テストフレームワーク入門
- Vue Test Utilsによる単体テスト
- エンドツーエンドテスト