Vitestで簡単テスト導入

はじめに

Vitestは、Viteを利用した高速な単体テストフレームワークです。
VitestはほとんどのJest APIおよびエコシステム、ライブラリとの互換性を提供されているため
これまでJestを使っていた場合は特に違和感なく移行可能だと思います。
今回はVitestの導入について簡単に解説して行きます。
前提としてViteの設定は完了しているものとします。

環境構築

インストール

npm install -D vitest

その他テストに必要なライブラリもインストールします。
examplesからテスト環境に合ったものを参考にすると対応しやすいと思います。

Vitest examples

config設定

vite.config.tsに追記します。
Viteの設定と統合されているのでセットアップが非常に簡単にできます。

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './vitest.setup.ts',
  },
})

globals: true

JestのようにAPIをグローバルに使用する設定

environment: 'jsdom'

テスト環境を指定します。
ブラウザで表示するアプリケーションの場合は、

jsdomまたはhappy-domを指定します。

setupFiles: './vitest.setup.ts'

セットアップファイルへのパスを指定します。
各テストファイルの前に実行されます。

Configuring Vitest
Triple-Slash Directives

tsconfig.json

TypeScriptをグローバルAPIで動作させるための設定です

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

vitest.setup.ts

vite.config.tsのsetupFilesに設定したファイルに共通処理を記載します。
テスト内容によって記載する内容は変わってきます。
下記の例では依存ライブラリのimport、グローバル変数、
JSDOMに実装されていないメソッドのモックなどの設定をまとめて行っています。

import '@testing-library/jest-dom'
import ResizeObserver from 'resize-observer-polyfill'

global.ResizeObserver = ResizeObserver
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: vi.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(),
    removeListener: vi.fn(),
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })),
})

JSDOMに実装されていないメソッドのモック

テスト実行

npx vitest

vitestコマンドはオプションなしの場合watchモードで動作します。
process.env.CI=trueだとrunモード（watchモード無効）でテスト開始します。
CI環境がCircleCIやGithub Actionsの場合はCI=trueがデフォルトになっているので

package.jsonに

"test": "vitest"

と書いておけばnpm run testで環境ごとにうまく動作してくれます

Vitest UI

ブラウザで詳細なテスト結果を見たいときは

npm i -D @vitest/ui

をインストール

vitest --ui

を実行することでブラウザが立ち上がって結果が表示されます。

まとめ

実行速度が速く、設定も簡単なので
Vite導入済みの環境で単体テストを行う際は有力な選択肢になりそうです。
テストに便利な機能も色々あるので今後もVitestの動向を追って行こうと思っています。