他のテストランナーとの比較
Jest
Jest は、JavaScript プロジェクトのテストフレームワークとして広く普及しています。その理由は、多くのプロジェクトでそのまま利用できるサポート、使いやすい API (it
や expect
など)、そしてスナップショット、モック、カバレッジといったテストに必要な機能が網羅されている点にあります。私たちは、Jest チームとコミュニティが素晴らしいテスト API を開発し、現在のウェブエコシステムにおける多くのテストパターンを確立したことに感謝しています。
Vite 環境で Jest を使用することも可能です。@sodatea が開発した vite-jest は、Jest と Vite の統合を目的としています。Jest における最後の課題が解決されたため、これはユニットテストの有効な選択肢となります。
しかし、Vite が TypeScript、JSX、主要な UI フレームワークなど、一般的なウェブツールをサポートしている現状において、Jest を併用することは複雑さの重複を招きます。アプリケーションが Vite を利用している場合、2つの異なるパイプラインを設定し、管理することは非効率的です。Vitest を使用すれば、開発、ビルド、テスト環境の構成を単一のパイプラインとして定義し、同じプラグインと vite.config.js
を共有できます。
Vite を使用していないライブラリ(例えば、esbuild や Rollup でビルドされている場合)であっても、Vitest は魅力的な選択肢です。ユニットテストの実行が高速化され、Vite のインスタント Hot Module Reload (HMR) を利用したデフォルトのウォッチモードにより、開発者体験 (DX) が向上するためです。Vitest は Jest の API とエコシステムライブラリのほとんどと互換性があるため、多くのプロジェクトで Jest の代替としてそのまま利用できるはずです。
Cypress
Cypress はブラウザベースのテストランナーであり、Vitest を補完するツールです。Cypress を使用する場合、アプリケーションのヘッドレスなロジックには Vitest を、ブラウザベースのロジックには Cypress を使用することをお勧めします。
Cypress はエンドツーエンドテストツールとして知られていますが、その新しいコンポーネントテストランナーは Vite コンポーネントのテストを強力にサポートしており、ブラウザでレンダリングされるあらゆるものをテストするのに理想的な選択肢です。
Cypress、WebdriverIO、Web Test Runner のようなブラウザベースのランナーは、実際のブラウザとブラウザ API を使用するため、Vitest では検出できない問題を発見できます。
Cypress のテストドライバーは、要素が可視であるか、アクセス可能であるか、インタラクティブであるかを判断することに重点を置いています。Cypress は UI の開発とテストのために特別に構築されており、その DX は視覚的なコンポーネントのテスト駆動に重点を置いています。テストレポーターと並行してコンポーネントがレンダリングされるのを確認でき、テスト完了後もコンポーネントは操作可能な状態のままであるため、ブラウザの開発ツールを使用して発生した障害をデバッグできます。
対照的に、Vitest は超高速な ヘッドレス テストにおいて最高の DX を提供することに注力しています。Vitest のような Node ベースのランナーは、jsdom
のような部分的に実装された様々なブラウザ環境をサポートしており、ブラウザ API を参照するコードを迅速にユニットテストできるよう、十分な機能を提供しています。しかし、その代償として、これらのブラウザ環境には実装できる機能に制限があります。例えば、jsdom には window.navigation
やレイアウトエンジン (offsetTop
など) のような多くの機能が欠けています。
最後に、Web Test Runner とは対照的に、Cypress テストランナーは、ブラウザで実際のレンダリングされたコンポーネントをテスト結果やログとともに確認できるため、テストランナーというよりも IDE のようなものです。
Cypress はまた、Vite を製品に統合しています。具体的には、アプリケーションの UI を Vitesse を使用して再構築し、Vite を使用してプロジェクトの開発をテスト駆動開発で行っています。
Cypress はヘッドレスコードのユニットテストには適した選択肢ではないと考えていますが、Cypress (E2E およびコンポーネントテスト用) と Vitest (ユニットテスト用) を併用することで、アプリケーションのテストニーズを網羅できるでしょう。
WebdriverIO
WebdriverIO は、Cypress と同様にブラウザベースのテストランナーであり、Vitest を補完するツールです。エンドツーエンドテストツールとしてだけでなく、ウェブコンポーネントのテストにも使用できます。WebdriverIO は、コンポーネントテストにおけるモックとスタブなどで、Vitest のコンポーネントを内部的に使用しています。
WebdriverIO は Cypress と同様に、実際のブラウザでロジックをテストできるという利点があります。しかし、自動化には実際のウェブ標準を使用しているため、Cypress でテストを実行する際のトレードオフと制限の一部を克服できます。さらに、モバイルでもテストを実行できるため、より多くの環境でアプリケーションをテストすることが可能になります。
Web Test Runner
@web/test-runner はヘッドレスブラウザ内でテストを実行し、ブラウザ API や DOM をモックアウトする必要なく、ウェブアプリケーションと同じ実行環境を提供します。これにより、開発ツールを使用して実際のブラウザ内でデバッグすることもできますが、Cypress テストのようにテストをステップ実行するための UI は表示されません。
Vite プロジェクトで @web/test-runner を使用するには、@remcovaes/web-test-runner-vite-pluginを使用します。@web/test-runner にはアサーションライブラリやモックライブラリは含まれていないため、それらを別途追加する必要があります。
uvu
uvu は Node.js およびブラウザ用のテストランナーです。テストを単一のスレッドで実行するため、テストは分離されておらず、ファイル間で影響が及ぶ可能性があります。しかし、Vitest はワーカースレッドを使用してテストを分離し、並行して実行します。
コードの変換には、uvu は require
とローダーフックを利用します。Vitest は Vite を使用するため、ファイルは Vite のプラグインシステムの全機能で変換されます。Vite が TypeScript、JSX、主要な UI フレームワークなど、一般的なウェブツールをサポートしている現状において、uvu を併用することは複雑さの重複を招きます。アプリケーションが Vite を利用している場合、2つの異なるパイプラインを設定し、管理することは非効率的です。Vitest を使用すれば、開発、ビルド、テスト環境の構成を単一のパイプラインとして定義し、同じプラグインと設定を共有できます。
uvu は変更されたテストを再実行するためのインテリジェントなウォッチモードを提供しませんが、Vitest は Vite のインスタント Hot Module Reload (HMR) を利用したデフォルトのウォッチモードにより、優れた DX を提供します。
uvu はシンプルなテストを実行するための高速な選択肢ですが、Vitest はより複雑なテストやプロジェクトにおいて、より高速で信頼性が高くなります。