v3.x のドキュメントを見たい場合はこちら

ガイド

v2.x 以前のドキュメントです。 v3.x のドキュメントを見たい場合はこちら

テスト

最終更新日: 2020年11月7日

はじめに

信頼性の高いアプリケーションを構築する時、テストは個人やチームが新機能を構築したり、コードをリファクタリングしたり、バグを修正したりする能力において重要な役割を果たすことができます。テストには多くの流派がありますが、Web アプリケーションの文脈でよく議論されるのは3つのカテゴリーです。

このセクションは、テストのエコシステムを案内し、Vue アプリケーションやコンポーネントライブラリに適切なツールを選択するためのガイダンスを提供することを目的としています。

単体テスト

導入

単体テストでは、コードの個々のユニットを分離してテストすることができます。単体テストの目的は、開発者が自分のコードに自信を持てるようになることです。徹底して意味のあるテストを書くことで、新しい機能が構築されたり、コードがリファクタリングされたりしても、アプリケーションが機能的で安定した状態を維持できるという自信を持つことができます。

Vue アプリケーションの単体テストは、他のアプリケーションのテストと大きな違いはありません。

フレームワークの選定

単体テストのアドバイスはフレームワークに依存しないことが多いので、アプリケーションに最適な単体テストツールを評価する際に心に留めておくべき基本的なガイドラインをいくつか紹介します。

最高のエラーレポート

テストが失敗した場合、単体テストフレームワークが有用なエラーを提供してくれることが重要です。これはアサーションライブラリの仕事です。高品質のエラーメッセージを持つアサーションは、問題のデバッグにかかる時間を最小限に抑えるのに役立ちます。どのテストが失敗しているかを伝えるだけでなく、アサーションライブラリは、テストが失敗した理由、例えば、何が期待されているのか、何を受け取ったのかなどのコンテキストを提供します。

Jest などの一部の単体テストフレームワークには、アサーションライブラリが含まれています。その他、Mocha のようなものではアサーションライブラリを別途インストールする必要があります (通常は Chai)。

アクティブなコミュニティとチーム

単体テストフレームワークの大部分はオープンソースなので、アクティブなコミュニティを持つことは、長期間にわたってテストをメンテナンスし、プロジェクトが積極的に維持されることを保証する必要があるチームにとって重要です。さらに、アクティブなコミュニティを持つことには、問題が発生したときにより多くのサポートを受けることができるという利点があります。

フレームワーク

エコシステムには多くのツールがありますが、Vue.js で使用されている一般的な単体テストツールは次の通りです。

Jest

Jest は、シンプルさを重視した JavaScript テストフレームワークです。そのユニークな機能の1つは、アプリケーションのユニットを検証するための代替手段として提供しているテストのスナップショットを取る機能です。

リソース:

Mocha

Mocha は、柔軟性に重点を置いた JavaScript テストフレームワークです。この柔軟性により、スパイ（Sinon など）やアサーション（Chai など）などの他の一般的な機能を満たすために、さまざまなライブラリを選択できます。 Mocha のもう1つのユニークな機能は、Node.js に加えてブラウザでもテストを実行できることです。

リソース:

コンポーネントテスト

導入

ほとんどの Vue コンポーネントをテストするには、それらが機能していることを完全に検証するために、それらを DOM（仮想またはリアル）にマウントする必要があります。これは、フレームワークに依存しないコンセプトです。その結果、コンポーネントテストフレームワークが作成され、ユーザーが確実にできる方法でこれを行うことができると同時に、Vuex、Vue Router、およびその他の Vue プラグインの統合など、Vue 固有の便利さが提供されます。

フレームワークの選択

次のセクションでは、アプリケーションに最適なコンポーネントテストフレームワークを評価する際に留意すべきガイドラインを示します。

Vue エコシステムとの最適な互換性

最初の基準の1つが、コンポーネントテストライブラリが Vue エコシステムと可能な限り互換性を持つべきという点なのは驚くに値しません。これは包括的に思えるかもしれませんが、留意すべきいくつかの重要な関係領域には、単一ファイルコンポーネント（SFC）、Vuex、Vue Router、およびアプリケーションが依存するその他の Vue 固有のプラグインが含まれます。

最高のエラーレポート

テストが失敗した場合、コンポーネントテストのフレームワークが、問題のデバッグにかかる時間を最小限に抑えるのに役立つ有用なエラーログを提供することが重要です。どのテストが失敗したかを単に伝えるだけでなく、なぜテストが失敗したのか、例えば、何が期待されているのか、何を受け取ったのかなどのコンテキストを提供しなければなりません。

推奨ツール

Vue Testing Library (@testing-library/vue)

Vue Testing Library は、実装の詳細に依存せずにコンポーネントをテストすることに焦点を当てたツール群です。アクセシビリティを考慮して構築されているため、そのアプローチはリファクタリングを容易にします。

その指針となる原則は、テストがソフトウェアの使用方法に類似しているほど、テストの信頼性が高くなるということです。

リソース:

Vue Test Utils

Vue Test Utils は、ユーザーが Vue 固有の API へのアクセスを提供するために書かれた公式の低レベルコンポーネントテストライブラリです。Vue アプリケーションのテストを初めて行う場合は、Vue Test Utils を抽象化した Vue Testing Library を使用することをお勧めします。

リソース:

End-to-End (E2E) テスト

導入

単体テストは開発者にある程度の信頼性を提供しますが、単体テストとコンポーネントテストは、本番環境にデプロイされたときに、アプリケーションの全体的なカバレッジを提供する能力には限界があります。結果として、 end-to-end (E2E) テストがアプリケーションの最も重要な側面、すなわちユーザーが実際にアプリケーションを使用したときに何が起こるか、をカバーしています。

言い換えれば、E2E テストは、アプリケーションのすべてのレイヤーを検証します。これには、フロントエンドのコードだけでなく、関連するすべてのバックエンドサービスやインフラストラクチャが含まれ、ユーザーの環境をより表すものとなります。ユーザーのアクションがアプリケーションにどのような影響を与えるかをテストすることで、E2E テストは、アプリケーションが適切に機能しているかどうかの信頼性を高める鍵となります。

フレームワークの選定

Web 上の end-to-end (E2E) テストは、信頼性の低い (欠陥のある) テストで開発プロセスを遅らせるという否定を受けてきましたが、最新の E2E ツールは、より信頼性の高い、インタラクティブで有用なテストを作成するために躍進しました。以下のセクションでは、E2E テストフレームワークを選択する際に留意すべきことについてのガイダンスを提供します。

クロスブラウザテスト

end-to-end (E2E)テストの知られている主な利点の1つは、複数のブラウザにまたがってアプリケーションをテストできることです。100%クロスブラウザをカバーすることが望ましいと思われるかもしれませんが、クロスブラウザテストを一貫して実行するために必要な追加の時間とマシンパワーのために、チームのリソースに対するリターンが減少することに注意することが重要です。結果として、アプリケーションが必要とするクロスブラウザテストの量を選択する際には、このトレードオフを念頭に置くことが重要です。

最近の E2E 開発ではブラウザ固有の問題を補足するために、一般的に使用されていないブラウザ（IE11 未満、古いバージョンの Safari など）のためにアプリケーションの監視とエラー報告ツール（Sentry、LogRocket など）が使用されています。

高速なフィードバックループ

end-to-end (E2E) テストと開発の主な問題の1つは、テスト全体の実行に長い時間がかかることです。一般的に、これは継続的インテグレーションと継続的デリバリー（CI/CD）のパイプラインでのみ行われます。最新の E2E テストフレームワークは、並列化のような機能を追加することで、CI/CD パイプラインを以前よりも大幅に高速に実行できようにしてこの問題を解決しています。さらに、ローカルで開発する場合、テストのホットリロードを提供しながら作業中のページの単一テストを選択的に実行する機能は、開発者のワークフローと生産性を向上させるのに役立ちます。

最高のデバッグ体験

開発者は従来、ターミナルウィンドウでログをスキャンしてテストで何がうまくいかなかったかを判断していましたが、最新の end-to-end (E2E) テストフレームワークでは、ブラウザ開発者ツールなど開発者がすでに使い慣れたツールを活用することができます。

ヘッドレスモードでの視認性

end-to-end (E2E)テストが継続的インテグレーション/継続的デリバリーのパイプラインで実行される場合、多くはヘッドレスブラウザで実行されます（つまり、ユーザーが見るためのブラウザが開かれていない）。そのため、エラーが発生した時に、最新の E2E テスティングフレームワークが第一級のサポートを提供する重要な機能は、エラーが発生した理由を把握するために、さまざまなテスト段階でのアプリケーションのスナップショットやビデオを表示する機能です。歴史的に、これらの統合を維持するのは面倒でした。

推奨ツール

エコシステムには多くのツールがありますが、ここでは Vue.js のエコシステムで使用されている一般的な end-to-end (E2E)テストフレームワークをいくつか紹介します。

Cypress.io

Cypress.io は、最高の開発者体験を提供しながら、開発者が信頼性の高い方法でアプリケーションをテストできるようにすることで、開発者の生産性を高めることを目的としたテストフレームワークです。

リソース:

Nightwatch.js

Nightwatch.js は、Node.js の単体テストや統合テストだけでなく、Web アプリケーションや Web サイトのテストにも使える end-to-end のテストフレームワークです。

リソース:

Puppeteer

Puppeteer はブラウザを制御するための高レベルの API を提供する Node ライブラリで、アプリケーションをテストするために他のテストランナー (例: Jest) と連携することができます。

リソース:

TestCafe

TestCafe は Node.js ベースの end-to-end フレームワークで、開発者が書きやすく信頼性の高いテストの作成に集中できるように、簡単なセットアップを提供することを目的としています。

リソース:

← 単一ファイルコンポーネント TypeScript のサポート →
間違いを見つけた、またはドキュメントに貢献したいですか？ GitHub で編集しましょう！ このサイトは Netlify でホストされています。