JestからVitestへの移行：実践的なガイド

ここ数年、フロントエンドアプリケーションを開発してきた方なら、Jestを使った作業にかなりの時間を費やしてきたことでしょう。JestはJavaScriptテストの要であり、開発者に堅牢で機能豊富、信頼性の高い環境を提供してきました。しかし、エコシステムが進化するにつれて、特にViteとES Modules (ESM)の台頭により、Jestのアーキテクチャがボトルネックに感じられることがありました。

そこで登場するのが、Viteを搭載した超高速ユニットテストフレームワーク、Vitestです。Vitestは、単に高速な実行だけでなく、Viteベースのプロジェクトとシームレスに統合する最新の開発体験を約束します。このガイドでは、移行すべき実用的な理由、具体的なメリット、そしてJestからVitestへテストスイートを汗をかくことなく移行するためのステップバイステップのアプローチを探ります。

なぜVitestに移行するのか？

フロントエンドのエコシステムは急速に変化しており、私たちが使用するツールもそれに追随する必要があります。Jestは依然として優れたツールですが、ViteとネイティブESMへのパラダイムシフトは、いくつかの摩擦点を露呈させました。移行を検討すべき主な理由は以下の通りです。

1. 統合された設定

ViteプロジェクトでJestを使用する際の最も大きな問題点の1つは、2つの異なる設定を維持することです。ビルドと開発サーバーにはvite.config.jsがあり、テストにはjest.config.jsがあります。この重複は、エイリアス、プラグイン、環境変数の処理方法に矛盾を生じさせることがよくあります。

Vitestは既存のVite設定を使用します。プラグイン、エイリアス、モジュール解決戦略をそのまま理解します。これは、プロジェクトの設定について単一の信頼できる情報源を維持できることを意味し、複雑さとメンテナンスのオーバーヘッドを大幅に削減します。

2. ネイティブESMサポート

JestはCommonJS時代に構築されました。ESMの実験的サポートは追加されていますが、設定は非常に困難な場合が多く、最新の構文を解析するためだけにBabelや他のトランスフォーマーが必要になることがよくあります。Vite上に構築されたVitestは、ESMファーストです。複雑な変換パイプラインを必要とせず、最新のJavaScriptとTypeScriptを難なく処理します。

3. テストのためのホットモジュールリプレイスメント (HMR)

Viteは驚くほど高速なホットモジュールリプレイスメントで有名ですが、Vitestはこの機能をテストランナーにもたらします。ファイルを変更すると、Vitestは必要なモジュールのみをスマートに無効化し、影響を受けるテストを即座に再実行します。これにより、即座にフィードバックが得られるようになり、開発者体験が大幅に向上します。

4. パフォーマンスの向上

VitestはViteの変換エンジン (esbuild) とネイティブのNodeワーカー スレッドを活用しているため、非常に高速です。多くのプロジェクトでは、JestからVitestへの移行により、テスト実行時間が2倍から5倍に短縮されます。CI環境では、これはビルドの高速化、パイプラインのコスト削減、そして開発者の満足度向上につながります。

移行パス：ステップバイステップ

大規模なテストスイートの移行は気が遠くなるように聞こえるかもしれませんが、VitestはJest APIと高い互換性を持つように設計されています。ほとんどのテストは、おそらく何の変更もなく実行されるでしょう。この移行を安全に実行するための実用的な手順を解説します。

ステップ1：Vitestと依存関係をインストールする

まず、Vitestをプロジェクトに追加する必要があります。また、UIやカバレッジ機能に依存している場合は、それらのパッケージもインストールしておきましょう。

npm install -D vitest @vitest/ui @vitest/coverage-v8

これで、Jestとその関連プラグイン（ts-jest、babel-jestなど）を安全に削除できます。

npm uninstall jest ts-jest @types/jest

ステップ2：Vitestを設定する

すでにvite.config.tsがある場合は、テスト設定を含めるように更新するだけです。/// <reference types="vitest" />ディレクティブを使用するか、vitest/configからdefineConfigをインポートする必要があります。

// vite.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true, // Enables Jest-like global APIs
    environment: 'jsdom', // Use 'happy-dom' or 'jsdom' for frontend testing
    setupFiles: './src/setupTests.ts',
  },
})

globals: trueを設定することで、Vitestはdescribe、it、expectをグローバルスコープに自動的に注入します。これにより、すべてのテストファイルでそれらをインポートする必要がなくなります。

ステップ3：セットアップファイルを更新する

カスタムマッチャー（toBeInTheDocumentなど）に@testing-library/jest-domを使用していた場合、引き続き使用できます。セットアップファイルが正しくインポートされていることを確認してください。

// src/setupTests.ts
import '@testing-library/jest-dom'

ステップ4：Jestのモックを処理する

これは通常、手動での移行作業の大部分を占める部分です。Vitestはモックをサポートしていますが、APIはJestとわずかに異なります。jest.mock()をvi.mock()に、jest.fn()をvi.fn()に置き換える必要があります。

グローバルモック（例：window.matchMediaのモック）がある場合は、viオブジェクトを使用するように更新してください。

// Before (Jest)
jest.spyOn(window, 'fetch').mockImplementation(() => { /* ... */ });

// After (Vitest)
vi.spyOn(window, 'fetch').mockImplementation(() => { /* ... */ });

src/ディレクトリ全体で（jest.をvi.に置き換える）簡単な検索と置換を行うことで、通常は作業の90%が処理されます。

ステップ5：タイマーと高度なモック

タイマーを操作していた場合、構文は同じですが、jestの代わりにviを使用します。

// Before
jest.useFakeTimers();
jest.advanceTimersByTime(1000);

// After
vi.useFakeTimers();
vi.advanceTimersByTime(1000);

ステップ6：スクリプトを更新して実行する

package.jsonスクリプトをVitestを使用するように更新します。

{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest run --coverage"
  }
}

さあ、テストを実行してください。モジュール解決やモックの処理方法の微妙な違いにより、いくつかのテストが失敗する可能性は非常に高いですが、大部分はすぐに合格するはずです。残りの失敗は個別に解決してください。

影響の評価

Vitestでテストスイートがグリーンになったら、少し時間を取ってその影響を評価してください。

1. 速度を確認する: ウォッチモードとCIモードの両方でテストを実行します。ウォッチモードではHMRのメリットを、CIモードでは純粋な実行速度の向上をすぐに実感できるはずです。
2. 設定を見直す: 削除できた設定の量を確認してください。Babel、Webpack、または複雑なJestトランスフォーマーの設定を削除できることは、リポジトリの保守性にとって大きな勝利です。
3. 開発者体験: Vitest UIを楽しんでください。npm run test:uiを実行すると、テスト、カバレッジ、依存関係グラフを視覚化するための美しいダッシュボードが表示されます。

知識を確認する（インタラクティブクイズ）

本番導入に向けたベストプラクティス

JestからVitestへの移行は、現代のフロントエンドプロジェクトにとって最もやりがいのあるインフラストラクチャのアップグレードの1つです。設定の整合性、ネイティブESMサポート、そして純粋な速度は、使用する喜びをもたらします。

Jestは何年もの間、コミュニティに信じられないほど貢献してきましたが、VitestはJavaScriptエコシステムにおけるテストの次の進化を表しています。実用的で段階的なアプローチに従うことで、テストスタックを最新化し、複雑な設定を削除し、最終的にはテストの完了を待つ時間を減らし、機能の出荷により多くの時間を費やすことができます。

こちらもおすすめ

• 最新CSSアニメーション：高性能GPUトランジション
• CSS Container Queries (@container): 2026年にコンポーネント対応CSS
• CSSGridとFlexbox：インタラクティブな視覚的決定ガイド（2026年版）
• TailwindCSSv4:新機能と移行方法