TL;DR
Vue や Vite の作者 Evan You が開発した、高速なテスティングフレームワーク。Vite を使うプロジェクトに最適化されている。
なぜ必要か
Vite を使うプロジェクトなら、アプリケーションと同じ設定のままテストを実行できる。Jest との互換性を考えて設計されているので、Jest からの移行も簡単である。JavaScript でも TypeScript でも使える。
仕組み
インストール
$ npm install --save-dev vitestpackage.json の scripts に追加する。
{
"scripts": {
"test": "vitest"
}
}デフォルトでは、describe や expect などの関数を import する必要がある。グローバルに使うには、vite.config.ts で defineConfig を vitest/config から import し、test.globals を true にする。
import { defineConfig } from "vitest/config"
import react from "@vitejs/plugin-react"
export default defineConfig({
plugins: [react()],
test: {
globals: true,
},
})さらに tsconfig.json の compilerOptions.types に vitest/globals を追加する。
{
"compilerOptions": {
"types": ["vitest/globals"]
}
}スナップショットテスト
スナップショットテストには toMatchSnapshot を使う。
it("matches snapshot", () => {
render(<CarouselSlide />)
expect(screen.getByRole("figure")).toMatchSnapshot()
})テストを実行すると、__snapshots__ ディレクトリにスナップショットのファイルを保存する。その後の実行で結果が変わるとテストが失敗し、差分が表示される。変更が意図したものであれば、-u（--update）を付けて再実行するか、テストの終了後に u を押すと、スナップショットを更新できる。
$ npm run test -- -uモック
Jest と同じように、モックを作る関数がそろっている。
vi.fn: 関数のスパイを作る。スパイは、呼び出されるたびに引数、戻り値、インスタンスを記録する。関数を渡せば振る舞いを決められ、渡さなければ呼び出されたときにundefinedを返すmockReset: スパイを初期化する。beforeEachなどで各テストの前に呼ぶのが望ましく、設定で自動化もできるtoHaveBeenCalledWith: 関数が指定した引数で呼び出されたかを確かめる。スパイに対してだけ使えるvi.useFakeTimers:setTimeoutやsetIntervalなどのタイマーをモックするvi.advanceTimersByTime: 時間の経過をミリ秒単位でシミュレートする