開発ツール

Vitest

上級

読み方：ヴィーテスト｜英語：Vitest

Viteベースの高速なJavaScriptテストフレームワーク。Jest互換のAPIを持ち、ESMやTypeScriptを追加設定なしでテストできる。

読み方

Vitestは「ヴィーテスト」（veetest）と読みます。公式ドキュメントのFAQでも「veetest」と発音すると説明されています。

❌ 「ヴァイテスト」ではない

英語の感覚で「ヴァイテスト」と読みたくなりますが、由来であるVite（ヴィート、フランス語で「速い」）に合わせて「ヴィーテスト」です。

やさしい説明

Vitestは、Viteベースの高速なJavaScriptテストフレームワークです。「書いたコードが正しく動くか」を自動でチェックするためのツールです。

たとえるなら、提出前の答案を自動で丸付けしてくれる採点マシンです。テスト（確認項目）を一度書いておけば、コードを変更するたびに全部の項目を一瞬でチェックし直してくれます。

従来よく使われてきたJestとほぼ同じ書き方ができ、ESM（import/export）やTypeScriptを追加設定なしでテストできるのが強みです。

具体例・使い方

Vitestでテストを書く例です。

// sum.test.js
import { describe, it, expect } from 'vitest';
import { sum } from './sum';

describe('sum関数', () => {
  it('1 + 2 は 3 になる', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

npx vitest で実行します。ウォッチモードが標準で有効なので、ファイルを保存するたびに自動でテストが再実行されます。

JestとVitestの違い

項目	Jest	Vitest
前提	CommonJS（従来型）	Vite / ESM（モダン）
速度	ふつう	高速
TypeScript	変換設定が必要	そのまま動く
書き方	ほぼ同じ（describe / it / expect）

いつ使う？

Viteを使っているプロジェクトでテストを書くとき（設定を共有できて導入が簡単）
ESM（import/export）やTypeScriptのコードを、変換設定なしでテストしたいとき
Jestから移行するとき（APIがほぼ互換なので書き換えが少ない）

間違いやすいポイント

❌ jest.config.js を作ってしまう

VitestはJest互換のAPIを持ちますが、設定は vite.config.ts（または vitest.config.ts）に書きます。jest.config.js は使いません。

❌ describe / it をimportせずに使う

Vitestは標準ではimportが必要です。Jestのようにグローバルで使いたい場合は設定で globals: true を有効にします。

よくある疑問

Q: Vitestの読み方は？

A: 公式ドキュメントでは「veetest（ヴィーテスト）」と発音すると説明されています。「ヴァイテスト」ではありません。Vite（ヴィート）が由来です。

Q: VitestとJestの違いは？

A: JestはCommonJS前提の従来型、VitestはVite/ESM前提で高速です。APIはほぼ互換なので移行しやすく、Viteプロジェクトの新規開発ではVitestが選ばれることが多いです。