Nightwatchでのコンポーネントテスト
概要
コンポーネントテストは、個々のコンポーネントを単独でテストするために使用されます。再利用可能なコンポーネントUIフレームワークの台頭により、非常に重要になっています。シングルページのフロントエンドアプリケーションの単体テストは、通常の単体テストのアプローチに対して、対処すべき問題のセット全体を提示することがよくあります。Webコンポーネントを確実に単独でテストするためには、最初にレンダリングできる必要があります。
どのように機能するのか？
Nightwatchでのコンポーネントテストは、vite-plugin-nightwatchプラグインを基に構築されています。このプラグインは、Viteを使用しているプロジェクトで使用できます。
また、Viteプラグインの上に構築され、内部でVite開発サーバーを使用する、VueおよびReact専用のプラグインも提供しています。
私たちの最初の目標は、ReactとVueコンポーネントをサポートすることであり、VueとReactのサポートが確実に確立されたら、SvelteやLitなどの他のフレームワークを追加する予定です。
コンポーネントのレンダリング
Webコンポーネントをテストする場合、重要な側面はコンポーネントがどのようにレンダリングされるかです。多くの場合、実際のブラウザを使用したレンダリングは、やり過ぎのように思え、すべてを遅くするようなぎこちないものに見えるかもしれません。たとえば、大規模なプロジェクトでは、エンドツーエンドのテストを担当する専任のQAチームがいる場合があります。このような場合、特に過度に複雑または遅い場合は、実際のブラウザを使用してコンポーネントテストを作成する必要はないように思えるかもしれません。
JSDomを使用したレンダリング
JSDomは、実際のブラウザを必要とせずに、Node.js仮想レンダラーを使用してWebコンポーネントをレンダリングする可能性を提供するツールです。すべてがCLIで発生し、通常は非常に高速です。通常は次のようになります。
Karma TestRunner/Puppeteerを使用したレンダリング
もう1つの一般的なアプローチは、Googleで約10年前に作成されたフロントエンドテストツールであるKarma Runnerのようなものを使用することです。 PuppeteerとブラウザベースのMochaが使用される、このテーマのバリエーションもあります。
このアプローチでは、必要なすべてのファイルがテストレンダラーページにロードされ、そこで全てが起こります。コンポーネントは依存関係と必要なテストツールとともにロードされ、コンポーネントがレンダリングされ、テストが同じブラウザコンテキストで実行されます。次のようになります。
制限
上記のいずれのアプローチも、テストの実行とデバッグの観点からは問題ありませんが、どちらにも固有の制限があり、簡単に見つけることができます。
JSDomレンダリングを使用する場合、制限は明らかです。実際のブラウザがないことです。ただし、考慮すべき利点は、速度とOSレベルのAPIへのアクセスです。これにより、ファイルのロードや高度なレポートの生成などのタスクがより簡単になります。
一方、Karma Runnerまたは同様のアプローチを使用する場合、利点は明確です。すべてがブラウザで発生するため、テストの信頼性が高くなります。ただし、欠点は、外部ファイルの操作が簡単ではなく、レポートが制限され、構成が非常に難しい可能性があることです。
Nightwatchでのレンダリング
Nightwatchが提供を目指しているのは、クロスブラウザCLIテストランナーと組み込みのアサーションライブラリを拡張し、統合された使いやすいソリューションを提供することで、両方のアプローチを組み合わせることです。Nightwatchはすでに、すべての主要なブラウザでのエンドツーエンドテストをサポートしており、組み込みのレポートとすぐに使える並列処理のサポートを備えています。
Nightwatchがコンポーネントテストを実行するために行うことは次のとおりです。
- CLIテストランナーは、実際のブラウザを起動し、基本的なHTMLページ（テストレンダラー）に移動します。
- テストレンダラー内では、VueまたはReactテストユーティリティを挿入し、テストする必要があるコンポーネントをマウントします。オプションで、Vueの場合は
storeやrouterなどのプラグインのリストを指定し、Reactの場合はpropsを指定します。 - コンポーネントが正常にレンダリングされると、DOM要素への参照がNightwatch CLIランナーに送り返されます。
- CLIランナーは、エンドツーエンドテストの場合と同じようにテストの実行を続行します。アサーションはNode.jsコンテキストで実行されます。
利点
使いやすさと一貫性
コンポーネントテストとしてNightwatchを使用する主な利点と動機は、エンドツーエンドテストの実行方法との使いやすさと一貫性です。Nightwatchを使用すると、すべてがインストールされているため、テストに関して構成する必要はありません。
OSレベルのAPIへのアクセス
また、テストはCLIテストランナーによって実行されるため、OSレベルのAPIにもアクセスでき、ViteランナーAPIにもアクセスできるため、ViteとNightwatch間でより高度な統合を直接行うことができます。
欠点
唯一の欠点は、JSDomレンダラーや、おそらくKarma Runnerよりも少し遅くなることです。ただし、Nightwatchは、より信頼性が高く使いやすいソリューション、より優れたレポート、および全体的に優れたエクスペリエンスを提供することで、それを補うことができると信じています。並列処理を有効にすると、速度はもはや問題にならない可能性があります。