【ヴィテスト】

Vitest とは?

最終更新:
💡 Viteの仕組みで動くテストランナー

Viteを基盤とするテストフレームワーク。Jestに近いAPIを提供し、Viteの設定を活用してテストを実行できる。移行時にはモックや設定の違いを確認する。

📌 このページのポイント
Jest と Vitest Jest ESMにも対応 (実験的) 設定に応じて変換 describe / it / expect jest.mock Vitest Viteを基盤に実行 Viteの設定を活用 Jestに近いAPI (差異あり) vi.mock 速度差は環境やテストによる 移行時は設定とモックの動作差を確認 Vitestはwatchで変更時に再実行できる
Jestに近いAPIを使えるが、完全互換ではない。速度は同じプロジェクトの条件で測り、移行時には公式ガイドの差異を確認する。
ひよこ ひよこ
VitestってJestと何が違うの?
ペンギン先生 ペンギン先生
describeやexpectなど見慣れたAPIを使えるけど、Viteを基盤に動くのが特徴だよ。Viteの設定をテストにも活用できるんだ
ひよこ ひよこ
どのくらい速くなるの?
ペンギン先生 ペンギン先生
一律には言えないよ。テストの内容や並列化、起動条件で変わるから、自分のプロジェクトで測ろう。JestにもESM対応があり、CommonJS変換が必須とは限らないんだ
ひよこ ひよこ
Viteを使ってないアプリでも使える?
ペンギン先生 ペンギン先生
テスト用にVitestを導入できるよ。アプリのビルドツールとは別に、必要な変換や実行環境を設定して確認しよう
ひよこ ひよこ
Jestからそのまま移せる?
ペンギン先生 ペンギン先生
完全互換ではないよ。VitestはグローバルAPIが既定で無効なのでimportするか設定を変える。両者のモックAPIの動作差なども移行ガイドで確認しよう
ひよこ ひよこ
UIモードってあるの?
ペンギン先生 ペンギン先生
あるよ。追加パッケージの@vitest/uiをインストールして、watchモードでvitest --uiを使うと結果をブラウザで見られるんだ。カバレッジ表示には別途その設定も必要だよ
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Vitest」って出てきたら「Viteを基盤にし、Jestに近いAPIを持つテストフレームワーク」と思えればだいたいOK!
📖 おまけ:英語の意味
「Vitest」 = Vite + Test(ヴィート+テスト)
💬 Viteを基盤にテストを行うツール、と名前を結び付けると覚えやすいよ

参考資料

← 用語集にもどる