昨年11月、Nightwatch にコンポーネントテストを追加する作業を開始し、この度、一般公開できる最初のバージョンを発表できることを嬉しく思います。これまでのところ、Vue と React コンポーネントをサポートしていますが、近い将来、あらゆる種類の Web コンポーネントをサポートする予定です。
Nightwatch でのコンポーネントテストは、ブラウザ統合をカバーしており、アサーションライブラリとレポーターが組み込まれているため、次の論理的なステップです。分離された状態でコンポーネントをレンダリングするための高速で信頼性の高い方法が必要でした。そのために、Vite を選択しました。これは、Vue.js プロジェクトのチームによって作成された新しいフロントエンドビルドツールです。
以下に、コンポーネントテストとは実際に何か、そして Nightwatch (v2.0) が Web コンポーネントのテストで発生するさまざまな問題にどのように対処するかを説明します。
コンポーネントテストの概要
シングルページフロントエンドアプリケーションのユニットテストでは、通常のユニットテストのアプローチよりも対処すべき問題の全体セットが発生します。Web コンポーネントを分離して確実にテストするには、最初にそれをレンダリングできるようにする必要があります。
Web コンポーネントをテストする場合、重要な側面はコンポーネントがどのようにレンダリングされるかです。多くの場合、実際のブラウザを使用したレンダリングは、過剰な処理のように思え、すべてを大幅に遅くするようなものになる可能性があります。たとえば、大規模なプロジェクトには、エンドツーエンドテストを担当する専任の QA チームが存在する場合があります。そのような場合、特に複雑すぎたり遅かったりする場合は、実際のブラウザを使用してコンポーネントテストを作成する必要はないように思えるかもしれません。
JSDom を使用したレンダリング
JSDom は、実際のブラウザを必要とせずに、Node.js の仮想レンダラーを使用して Web コンポーネントをレンダリングする可能性を提供するツールです。すべてが CLI で行われ、通常は非常に高速です。
通常、このようになります
Karma TestRunner/Puppeteer を使用したレンダリング
もう 1 つの人気のあるアプローチは、Google で約 10 年前に作成されたフロントエンドテストツールである Karma Runner のようなものを使用することです。Puppeteer とブラウザベースの Mocha が使用されるこのテーマのバリエーションもあります。
このアプローチでは、必要なすべてのファイルがテストレンダラーページにロードされ、そこでコンポーネントが依存関係と必要なテストツールとともにロードされ、コンポーネントがレンダリングされて同じブラウザコンテキストでテストが実行されます。少しこのようになります
Nightwatch でのレンダリング
上記のどちらのアプローチでも、テストの実行とデバッグに関しては問題ありませんが、どちらにも簡単にわかる独自の制限があります。
JSDom レンダリングを使用する場合の制限は明らかです。実際のブラウザはありません。ただし、考慮すべき利点は、速度と OS レベルの API へのアクセスです。これにより、ファイルのロードや高度なレポートの生成などのタスクがより簡単になります。
一方、Karma Runner または同様のアプローチを使用する場合の利点は明らかです。すべてがブラウザで実行されるため、テストの信頼性が高まります。ただし、不利な点は、外部ファイルの操作が簡単ではなく、レポートも制限されることです。また、通常、セットアップを機能させるためだけに、いくつかのツールを組み合わせて使用する必要があるため、構成もかなり難しいと感じました。
Nightwatch が提供を目指しているのは、クロスブラウザ CLI テストランナーと組み込みのアサーションライブラリを拡張し、統合された使いやすいソリューションを提供することによって、両方のアプローチを組み合わせることです。Nightwatch は、すでにすべての主要なブラウザでのエンドツーエンドテストをサポートしており、組み込みのレポート機能と並列処理のサポートが標準で付属しています。
Nightwatch がコンポーネントテストを実行するために行うことは次のとおりです
- CLI テストランナーは、実際のブラウザを起動し、基本的な HTML ページ（テストレンダラー）に移動します
- テストレンダラー内で、Vue または React テストユーティリティを注入し、テストするコンポーネントをマウントします。Vue の場合はストアまたはルーターなどのプラグインのリスト、React の場合は props をオプションで指定します
- コンポーネントが正常にレンダリングされると、DOM 要素への参照が Nightwatch CLI ランナーに返送されます
- CLI ランナーは、エンドツーエンドテストの場合と同じ方法でテストの実行を続けます。アサーションは Node.js コンテキストで実行されます
Vite とは何ですか?
Vite は、最新の Web アプリケーション向けの非常に高速なビルドツールで、最初は Vue.js アプリケーション向けに作成されましたが、現在は React やその他の UI フレームワークもサポートしています。Vite はフランス語で「高速」を意味し、利用可能なフロントエンドビルドツールの中で Vite が最速であり、最も使いやすいビルドツールの 1 つであるため、適切な名前です。
Babel や Webpack などのツールを使用したことがある場合は、ビルド設定の複雑さや起動時間の遅さから生じる問題に精通しているかもしれません。Vite は、すでに設定済みのツールを提供し、ES モジュール を直接処理する最新のブラウザの新しい機能を利用することで、これらの問題をすべて解消しました。したがって、Babel のようなツールを使用する必要はありません。
さらに、Vite は、Javascript コードと関連アセットのバンドルに内部で ESBuild を使用しています。これは、他のツールと比較して非常に高速であるようです。
どのように動作しますか?
現時点では、Nightwatch でのコンポーネントテストは、Vite を使用しているプロジェクトで、新しい vite-plugin-nightwatch プラグインを介して利用できます。当初の目標は、React および Vue コンポーネントをサポートし、コミュニティから初期のフィードバックを収集することです。
Vue および React のサポートが確実に確立されたら、Svelte や Lit などの他のフレームワークを追加するために拡張します。
インストール
今のところ、新しい Vite プラグインは NPM からインストールできます。
npm install vite-plugin-nightwatch構成
Vite 構成を更新します
import { defineConfig } from 'vite'
import nightwatchPlugin from 'vite-plugin-nightwatch'
export default defineConfig({
plugins: [
// ... other plugins, such as vue() or react()
nightwatchPlugin()
]
})Nightwatch 構成を更新し、プラグインをリストに追加します
module.exports = {
plugins: ['vite-plugin-nightwatch'],
// ... other nightwatch settings
}より詳細な使用法、例、および API ドキュメントについては、Github ページにアクセスしてください。
nightwatchjs完全な例
また、プラグインの使用方法を示す React と Vue の両方のサンプルプロジェクトもまとめました。
これらのプロジェクトは両方とも継続的に開発中であるため、更新に注目してください。
Vue コンポーネントのサンプルテスト
これは、Vue コンポーネントテストの基本的な例です。プラグインの一部として こちら で入手可能な、Vue で記述された基本的な Form コンポーネントをテストしています
describe('Render Vue Component test', function() {
let formComponent;
before(async function() {
formComponent = await browser.mountVueComponent('/test/components/vue/Form.vue', {});
});
it('checks the vue component', function(browser) {
browser.expect.element(formComponent).to.be.present;
browser.setValue('#movie-input', 'Fargo');
const inputEl = formComponent.find('input[type="radio"][value="3"]');
browser.expect(inputEl).to.be.present;
browser.click(inputEl);
browser.expect(formComponent.property('rating')).to.equal('3');
browser.expect(formComponent.property('title')).to.be.a('string')
.and.equal('Fargo');
});
});これは、他の Nightwatch テストとして実行するか、プロジェクトを複製/フォークして含まれているテストを実行できます。
git clone git@github.com:nightwatchjs/vite-plugin-nightwatch.git
npm install
npx nightwatch test/specs/vue/testVueComponent.js --env vueVite 開発サーバーが起動して実行されていることを確認します。
npm run devNightwatch からプログラムで Vite 開発サーバーを実行する
Nightwatch グローバル before フックから Vite 開発サーバーを起動し、after フックで閉じることもできます。
当社のプラグインは、独自のテストを実行するためにそれだけを行っており、詳細は Readme に記載されています。今後の Nightwatch プラグインリリースでは、この機能が標準で提供され、プロジェクトが Vite に基づいているかどうかにかかわらず、コンポーネントテストを実行できるようになります。
コンポーネントテストのデバッグ
Nightwatch でのコンポーネントテストのデバッグは、Nightwatch がコンポーネントをレンダリングするコードをブラウザに注入する必要があるため、通常の Node.js アプリケーションまたはサービスのデバッグほど簡単ではありません。
ただし、Chrome でテストを実行する場合は、DevTools を使用してブラウザで直接デバッグできます。この目的のために、Nightwatch は 2 つの CLI フラグを提供します。
--devtools- これがオンの場合、Chrome DevTools が自動的に開きます--debug- これにより、コンポーネントがレンダリングされた直後にテストの実行が一時停止されます
コンポーネントテストに Nightwatch を使用する利点
コンポーネントテストに Nightwatch を使用する主な利点と動機は、使いやすさと、エンドツーエンドテストの実行方法との一貫性です。Nightwatch では、すべてがインストールされているため、テストに関してさらに構成する必要はありません。
また、テストは CLI テストランナーによって実行されるため、OS レベルの API にアクセスでき、Vite ランナー API にもアクセスできるため、Vite と Nightwatch 間でより高度な統合を直接行うことができますが、それは今後のアップデートに残しておきます。
唯一の欠点は、JSDomレンダラーや、おそらくKarma Runnerよりも少し遅くなることです。しかし、より信頼性が高く、使いやすいソリューション、より良いレポート、そして全体的に優れたエクスペリエンスを提供することで、十分に補えると考えています。並列処理を有効にすれば、速度はもはや問題にならないでしょう。