Vitest Browser Mode vs Jest jsdom
Vitest browser modeは実ブラウザでコンポーネントテストを実行し、jsdomを使うJestは高速なシミュレートされたDOMに対して実行します。
jsdomを使うJestは、軽量でシミュレートされたDOMでコンポーネントテストを実行します。これは高速でシンプルですが、実際のレイアウト、真のブラウザAPI、視覚的な挙動を再現できません。Vitest browser modeは、同じテストを実際のブラウザ(Playwright/WebDriverのprovider経由)で実行し、jsdomが偽装するもの(レイアウト、実イベント、CSS)に高い忠実度を与えますが、セットアップが重く実行が遅くなります。jsdomは速度とシンプルさで優れ、Vitest browser modeは実ブラウザの忠実度で優れます。
| Vitest Browser | Jest jsdom | |
|---|---|---|
| 環境 | 実ブラウザ | シミュレートされたDOM (jsdom) |
| 忠実度 | 高い(真のブラウザAPI) | 近似 |
| 速度 | 遅め(実ブラウザ) | 高速 |
| セットアップ | ブラウザのproviderが必要 | 最小限 |
| 最適な用途 | レイアウト/視覚の忠実度 | 高速なロジックレベルのコンポーネントテスト |
ユースケースと忠実度
Jest jsdomは、正確なレンダリングが問題にならない高速なロジックレベルのコンポーネントテストに適しています。Vitest browser modeは、jsdomが偽装できない実際のレイアウト、真のブラウザAPI、視覚的な挙動に依存するテストに適しており、重く遅いセットアップを受け入れます。多くのチームは大半をjsdomに保ち、高忠実度のケースにbrowser modeを残します。
CIへの適合
jsdomはCIで簡単に動作し、Vitest browser modeはブラウザのバイナリ(Playwright/WebDriver)のインストールが必要です。どちらもmanaged runnerで動作し、高速なrunnerはブラウザのインストールと実ブラウザのテスト工程を短縮します。
結論
高速なロジックレベルのコンポーネントテストが必要なら: jsdomを使うJest(またはjsdomを使うVitest)。実際のレイアウト、真のブラウザAPI、視覚的な忠実度が必要なら: Vitest browser mode。jsdomは速くシンプル、browser modeは速度と引き換えに忠実度を得ます。