Vueを学ぶ

第11章. Vueでテストする

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

ここまで、さまざまなVue APIを使ってゼロから完全なVueアプリケーションを開発することについて学んできた。アプリケーションはデプロイする準備ができたが、その前に、アプリケーションにバグがなく、本番環境に対応できることを確認する必要がある。これがテストの出番だ。

テストは、どのようなアプリケーション開発にとっても重要であり、本番環境にリリースする前にコードの信頼性と品質を高めるのに役立つ。この章では、さまざまな種類のテストと、Vueアプリケーションでのそれらの使用方法について学ぶ。また、単体テスト用のVitestやVue Test Utils、エンドツーエンド（E2E）テスト用のPlaywrightJSなど、さまざまなツールについても検討する。

単体テストとE2Eテスト入門

ソフトウェア開発には、アプリケーションが期待通りに動作することを保証するために、手動と自動の両方のテストプラクティスとテクニックがある。手動テストは、テスト実施者が手作業でソフトウエアと対話することを必要とし、コストが高くつく可能性があるのに対して、 自動テストは、一連のテストを含む、あらかじめ定義されたテストスクリプトを、自動化された方法で実行することが主な目的です。自動化されたテストの集合は、単一の関数から異なる部分の組み合わせまで、単純なものからより複雑なアプリケーションシナリオまで検証することができる 。

自動テストは、テストを正しく記述し、以下のテストプロセスを実行することを前提にすれば、手動テストよりも信頼性が高く、拡張性がある：

単体テスト

ソフトウェア開発において、最も一般的で最も低いレベルのテストである。単体テストは、関数、フック、モジュールなど、特定のアクションを実行するコードの単位（またはコードブロック）を検証するために使う。単体テストをテスト駆動開発（TDD）と組み合わせることができる。¹と組み合わせることができる。

テストの統合

このテストタイプは、コードの異なる単体ブロックの統合を検証する。統合テストは、論理関数、コンポーネント、またはモジュールのフローを保証することを目的とする。コンポーネントテストは、単体テストとして、その内部ロジックとテストを統合する。また、テストスコープ外のほとんどの上流サービスやその他の関数をモックし、テスト品質を確保する 。

エンドツーエンド（E2E）テスト

ソフトウェア開発における最高レベルのテスト。E2E テストは、通常、実際のユーザの振る舞いをシミュレートすることによって、クライアントサイドからバックエンドまでのアプリケー ションフロー全体を検証するために使用する。E2Eテストでは、アプリケーションフロー全体をテストしたいので、モックされたサービスや関数は存在しない 。

注

テスト駆動開発（TDD）とは、まずテストケースをデザインして書き（レッド・フェーズ）、テストに合格するようにコードに手を加え（グリーン・フェーズ）、コードの実装を改善する（リファクタリング・フェーズ）ことを意味する。実際の開発前にロジックと設計を検証するのに役立つ。

これらの 3 つのテストタイプは、図 11-1 に示すように、テストのピラミッドを形成します。そこでは、主に単体テス トに焦点を当て、次に統合テストに焦点を当てます。私たちは、任意のコンポーネント、サービス、モジュールからアプリケーションを作成するので、最小限のコストと労力でコードベースの品質を維持するためには、分離された機能や機能ごとに単体テストを実施すれば十分である ...