【ヴィテスト】

Vitest とは?

💡 Viteの速さでテストも爆速!Jest互換の次世代テストランナー
📌 このページのポイント
Jest vs Vitest 比較 Jest CommonJS変換が必要 起動に時間がかかる 豊富なエコシステム 長年の実績と安定性 ████████ 実行速度 vs Vitest ESModulesネイティブ対応 Viteベースで爆速起動 Jest互換API HMR対応で即座に再実行 ████████████████ 実行速度 共通→ describe / it / expect / mock などのAPIは同じ
Jest vs Vitestの比較イメージ
ひよこ ひよこ

VitestってJestと何が違うの?

ペンギン先生 ペンギン先生

APIはほぼJestと同じだから、使い勝手はそっくりなんだ。大きな違いはViteの仕組みを使ってテストを実行すること。ESModulesをネイティブに処理できるから、設定ファイルが少なくて済むし、テストの起動がとても速いよ

ひよこ ひよこ

どのくらい速くなるの?

ペンギン先生 ペンギン先生

プロジェクトの規模にもよるけど、Jestと比べて2〜5倍速くなるケースが多いよ。特にテストの起動時間(コールドスタート)の差が大きいんだ。JestはCommonJSへの変換が必要だけど、VitestはESModulesをそのまま扱えるからね

ひよこ ひよこ

Viteを使ってないプロジェクトでも使えるの?

ペンギン先生 ペンギン先生

使えるよ!Vitest自体がViteを内蔵しているから、webpackベースのプロジェクトでもテストだけVitestに切り替えることができるんだ。vite.config.tsがなくても動くよ

ひよこ ひよこ

Jest互換ってことは、Jestから乗り換えやすいの?

ペンギン先生 ペンギン先生

かなり楽だよ。describe、it、expect、mockといった基本的なAPIがそのまま使えるから、テストコードの書き換えはほとんど不要なんだ。設定ファイルをvitest.config.tsに移行して、importを変えるくらいで済むことが多いよ

ひよこ ひよこ

UIモードってあるの?

ペンギン先生 ペンギン先生

あるよ!`vitest --ui`で起動すると、ブラウザ上でテスト結果を一覧表示したり、個別のテストをクリックして再実行したりできるんだ。さらにインラインでコードカバレッジも表示される。JestにはなかったビルトインのUI機能で、テストのデバッグがとても快適になるよ。Viteエコシステムを使っているなら、もはやVitestを選ばない理由がないくらいだね

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Vitest」って出てきたら「Vite向けのJest互換テストフレームワークで、めちゃくちゃ速い」と思えればだいたいOK!
📖 おまけ:英語の意味
「Vitest」 = Vite + Test(ヴィート+テスト)
💬 ViteとTestを組み合わせた名前だよ。Viteが「速い」を意味するフランス語だから、「速いテスト」という意味が込められているんだ
← 用語集にもどる