MENU

Vitestとは|Viteネイティブな次世代JSテストランナー

Vitest アイキャッチ
Vitest

Vitestは2021年にViteの開発者として知られるAnthony Fuらが立ち上げたJavaScript/TypeScript向けテストフレームワークである。Viteのプラグインとトランスフォーム機構をそのまま再利用することで、ESMとTypeScriptを追加設定なしに扱え、HMRに似た仕組みでテスト再実行を瞬時に行える点が大きな特徴となる。本稿ではVitestが登場した背景、Jestとの互換性、ブラウザモードや並列モデルなどの技術要素を順に整理する。

目次

この記事の目次

  1. Vite時代に生まれたテストランナー
  2. Workerプールとウォッチ実行の仕組み
  3. ブラウザモードと型レベルテスト
  4. Jestからの移行と注意点
  5. まとめ

Vite時代に生まれたテストランナー

Vite時代に生まれたテストランナー

2020年にEvan Youが公開したViteはesbuildとRollupを組み合わせた次世代ビルドツールとして急速に支持を集めたが、Vite前提のプロジェクトではJestがESMやTypeScriptを処理するための追加設定が重荷となっていた。Anthony Fuはこの摩擦を解消するため、Viteのtransformをそのまま流用するテストランナーとしてVitestを立ち上げ、2021年12月に最初のリリースを公開した。VueやSvelteKitなどViteを採用するフレームワークから順次採用が進んだ。

設計の柱は「Vite共有」「Jest API互換」「ESMファースト」の三点である。テスト実行時もアプリと同じviteConfigを参照するため、エイリアスやプラグインが二重に設定されることがない。describe/it/expectはJestと同じシグネチャを持ち、既存のJestテストをほぼ書き換えなく移行できる互換層を備える。これにより新規プロジェクトと既存資産の両方を視野に入れた採用判断が可能になった。

Workerプールとウォッチ実行の仕組み

Workerプールとウォッチ実行の仕組み

Vitestはデフォルトでtinypoolによるワーカープールを利用し、テストファイルごとに独立した実行コンテキストを与える。Node.jsのworker_threadsを採用するためプロセス起動コストが小さく、Jestのフォーク方式より起動時間が短い傾向がある。並列度は--threadspoolOptions.threads.maxThreadsで調整でき、CI環境ではコア数に応じて自動チューニングする。

ウォッチモードでは、Viteの依存グラフを使って変更ファイルに関係するテストだけを再実行する。テスト本体を書き換えればそのテストのみ、ソース側を書き換えれば影響するテストのみが対象となり、大規模プロジェクトでも秒単位のフィードバックが得られる。--coverageオプションではv8カバレッジまたはistanbulを選択でき、Viteのソースマップと連携してオリジナルファイル単位の集計が行える点も実用上有用である。

ブラウザモードと型レベルテスト

ブラウザモードと型レベルテスト

Vitestはバージョン0.34以降でブラウザモードを実装し、PlaywrightやWebdriverIO経由で実ブラウザ上にテストを流し込めるようになった。従来Jest+jsdomでは検証しにくかったCSSレイアウトやWeb APIの実挙動を、同じexpectAPIで確認できる点が画期的である。ChromiumやFirefoxを選び、CI上ではヘッドレスで動かす運用が増えている。

型レベルテストではexpectTypeOfassertTypeがTypeScriptの型推論をテストできる。ライブラリ作者にとっては、ジェネリクスや条件型が想定通り解決されるかをCIで自動検証できる意義が大きい。また--inspect-brkによるVSCodeデバッグ連携、@vitest/uiが提供するブラウザUIで失敗テストを視覚的に追える機能も備わっており、開発体験はJestを上回るとする評価が定着しつつある。

Jestからの移行と注意点

Jestからの移行と注意点

JestからVitestへの移行は、jest.config.jsの代わりにvitest.config.tsを用意し、jest.fnjest.mockvi.fn/vi.mockへ置換するのが基本となる。多くのテストはほぼそのまま動くが、jest.useFakeTimersのオプション差や、requireに依存していたモック書式は要修正である。公式のvitest-codemodsを使うと半自動で書き換えが進むため、数百ファイル規模でも現実的な工数で完了できる。

注意点としては、Vitestがあくまで「Vite前提」のツールであることが挙げられる。Viteを使わないNext.jsの一部構成やWebpack中心のリポジトリではメリットが薄く、Jestを維持する方が運用コストが低い場合もある。React NativeのようにMetroバンドラを前提とする環境では現状サポートが弱く、採用判断時にはアプリ側のビルドツール構成と合わせて検討することが重要である。

まとめ

VitestはViteエコシステムの拡張として登場した若いテストランナーだが、API互換性とビルド共有という二本柱でJestからの移行コストを抑えつつ、開発体験を一段引き上げた点が高く評価されている。Viteベースのプロジェクトでは事実上の第一選択となりつつあり、ブラウザモードや型テストの進化も含めて今後の動向に注目したい。

※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次