他のテストランナーとの比較

Jest

Jest は、ほとんどの JavaScript プロジェクトに対するすぐに使えるサポート、使いやすい API (it と expect)、そしてほとんどのセットアップで必要とされるテスト機能のフルセットを提供することで、テストフレームワークの分野を席巻しました。Jest チームとコミュニティが素晴らしいテスト API を作成し、現在 Web エコシステムで標準となっている多くのテストパターンを推進してくれたことに感謝します。

Vite のセットアップで Jest を使用することも可能です。sodatea 氏が vite-jest を構築しました。これは、Jest と Vite を最高の形で統合することを目的としています。Jest の最後の技術的な課題も解決されたため、ユニットテストの有効な選択肢となります。

しかし、Vite が最も一般的な Web ツール (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 を製品に統合しています。Vitesse を使用して App の 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 はありませんが、開発者ツールを使用して実際のブラウザ内でデバッグすることも可能です。ウォッチモードはありますが、Vitest ほど高度ではなく、必要なテストが常に再実行されるとは限りません。Vite プロジェクトで @web/test-runner を使用するには、@remcovaes/web-test-runner-vite-plugin を使用します。@web/test-runner にはアサーションライブラリやモックライブラリは含まれていないため、別途追加する必要があります。

uvu

uvu は、Node.js およびブラウザ用のテストランナーです。単一のスレッドでテストを実行するため、テストは分離されておらず、ファイル間で状態がリークする可能性があります。一方、Vitest はワーカースレッドを使用してテストを分離し、並列実行します。コードの変換のために、uvu は require とローダーフックに依存しています。Vitest は Vite を使用するため、ファイルは Vite のプラグインシステムのフルパワーで変換されます。Vite が最も一般的な Web ツール (TypeScript、JSX、最も人気のある UI フレームワーク) をサポートしている現在、uvu は複雑さの重複を招く可能性があります。もしあなたのアプリが Vite によって動作しているなら、設定と保守のために 2 つの異なるパイプラインを持つことは必ずしも合理的ではありません。Vitest を使用すると、開発、ビルド、テスト環境の設定を単一のパイプラインとして定義し、同じプラグインと同一の vite.config.js を共有できます。uvu は変更されたテストを再実行するためのインテリジェントなウォッチモードを提供していませんが、Vitest は Vite のインスタント Hot Module Reload (HMR) を使用したデフォルトのウォッチモードのおかげで、優れた DX を提供します。uvu は単純なテストを実行するには高速なオプションですが、より複雑なテストやプロジェクトでは Vitest の方が高速で信頼性が高いでしょう。