他のテストランナーとの比較
Jest
Jest は、ほとんどの JavaScript プロジェクトに対するすぐに使えるサポート、使いやすい API (it と expect)、およびほとんどのセットアップで必要となるテスト機能 (スナップショット、モック、カバレッジ) のフルパックを提供することで、テストフレームワークの分野を席巻しました。私たちは、Jest チームとコミュニティが、楽しいテスト API を作成し、現在 Web エコシステムで標準となっている多くのテストパターンを推進してくれたことに感謝しています。
Vite セットアップで Jest を使用することは可能です。@sodatea は、vite-jest を構築しました。これは、Jest のためのファーストクラスの Vite 統合を提供することを目的としています。Jest の最後の ブロッカー は解決されたため、これはユニットテストのための有効なオプションです。
しかし、最も一般的な Web ツール (TypeScript、JSX、最も人気のある UI フレームワーク) のサポートを提供する Vite がある世界では、Jest は複雑さの重複を表します。アプリが Vite で動作している場合、構成および保守する 2 つの異なるパイプラインを持つことは正当化できません。Vitest を使用すると、開発、ビルド、およびテスト環境の設定を、同じプラグインと 同じ vite.config.js を共有する単一のパイプラインとして定義できます。
ライブラリが Vite を使用していない場合 (たとえば、esbuild または Rollup で構築されている場合) でも、Vitest は、ユニットテストの実行が速くなり、Vite のインスタントホットモジュールリロード (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 ベースのランナーは、ブラウザ API を参照するコードをすばやく単体テストするのに十分な実装を提供する、jsdom のようなさまざまな部分的に実装されたブラウザ環境をサポートしています。トレードオフは、これらのブラウザ環境には実装できるものに制限があるということです。たとえば、jsdom は window.navigation やレイアウトエンジン (offsetTop など) のような多くの機能が欠落しています。
最後に、Web Test Runner とは対照的に、Cypress テストランナーは、テスト結果とログとともに、ブラウザに実際にレンダリングされたコンポーネントも表示されるため、テストランナーというよりも IDE のようです。
Cypress はまた、製品に Vite を統合 しています。Vitesse を使用してアプリの UI を再構築し、Vite を使用してプロジェクトの開発をテスト駆動しています。
Cypress はヘッドレスコードのユニットテストには適していないと考えていますが、Cypress (E2E およびコンポーネントテスト用) と Vitest (ユニットテスト用) を使用することで、アプリのテストニーズをカバーできると考えています。
WebdriverIO
WebdriverIO は、Cypress と同様に、ブラウザベースの代替テストランナーであり、Vitest の補完ツールです。エンドツーエンドのテストツールとして、また Web コンポーネント のテストにも使用できます。また、コンポーネントテスト内で モックとスタブ を行うなど、Vitest のコンポーネントを内部で使用しています。
WebdriverIO は、Cypress と同じ利点を備えており、実際のブラウザでロジックをテストできます。ただし、自動化には実際の Web 標準 を使用しているため、Cypress でテストを実行する場合のトレードオフと制限の一部を克服できます。さらに、モバイルでもテストを実行できるため、さらに多くの環境でアプリケーションをテストできます。
Web Test Runner
@web/test-runner は、ヘッドレスブラウザ内でテストを実行し、ブラウザ API や DOM をモックする必要なく、Web アプリケーションと同じ実行環境を提供します。また、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 のプラグインシステムのすべての機能で変換されます。最も一般的な Web ツール (TypeScript、JSX、最も人気のある UI フレームワーク) のサポートを提供する Vite がある世界では、uvu は複雑さの重複を表します。アプリが Vite で動作している場合、構成および保守する 2 つの異なるパイプラインを持つことは正当化できません。Vitest を使用すると、開発、ビルド、およびテスト環境の設定を、同じプラグインと 同じ設定を共有する単一のパイプラインとして定義できます。
uvu は、変更されたテストを再実行するためのインテリジェントなウォッチモードを提供しませんが、Vitest は、Vite のインスタントホットモジュールリロード (HMR) を使用したデフォルトのウォッチモードのおかげで、素晴らしい DX を提供します。
uvu は、簡単なテストを実行するための高速なオプションですが、Vitest はより複雑なテストやプロジェクトに対して、より高速で信頼性が高くなる可能性があります。