JavaScript のテストの書き方（Vitest）

Vitestの簡単な使い方

Vite + React + TypeScript のプロジェクトに Vitest を導入したので、導入手順と基本的な使い方をまとめます。

環境は以下です。

• Vite 8
• React 19
• TypeScript 6
• Vitest 4.1.10

Vitest とは

Vite のビルドパイプラインをそのまま使うテストランナーです。

Vitestの比較候補としては、Jestが上がってきますが、あちらと比較すると実行速度の速さがメリットとして挙げられます。
Jestに関しては長年使われてきたということもあり、情報量は多いというメリットがあるそうです。

導入

インストールは devDependencies に 1 つ入れるだけです。

npm install -D vitest

package.json にスクリプトを追加します。

{
  "scripts": {
    "test": "vitest"
  }
}

Vite プロジェクトであれば、これだけで動きます。

最初のテストを書く

テストファイルは *.test.ts または *.spec.ts という名前にします（.tsx も同様）。Vitest はデフォルトでこのパターンのファイルを探して実行します。

src/logic/sum.test.ts:

import { expect, test } from 'vitest'

test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3)
})

実行する

npm test

vitest は ウォッチモードで起動します。ファイルを保存するたびに、変更されたファイルに関係するテストだけが再実行されます。開発中はこれが快適です。

CI など「1 回実行して結果を返して終わってほしい」場面ではウォッチモードだと終了しないので、run を付けます。

npx vitest run

CI を組む段階になったら、スクリプトを分けておくのが無難です。

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run"
  }
}

実行するとこんな出力になります。

 ✓ src/logic/sum.test.ts (1 test) 1ms

 Test Files  1 passed (1)
      Tests  1 passed (1)

基本的な書き方

describe でグループ化する

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

describe('sum', () => {
  test('正の数を足せる', () => {
    expect(sum(1, 2)).toBe(3)
  })

  test('負の数を足せる', () => {
    expect(sum(-1, -2)).toBe(-3)
  })
})

test のエイリアスとして it も使えます。どちらでも同じです。

よく使う matcher

expect(value).toBe(3)                    // Object.is による比較。プリミティブ向け
expect(obj).toEqual({ a: 1 })            // 再帰的な値の比較。オブジェクト・配列向け
expect(list).toContain('foo')            // 配列に含まれるか
expect(value).toBeNull()                 // nullがどうか
expect(value).toBeUndefined()            // 未定義かどうか
expect(flag).toBeTruthy()                // 値が真かどうか
expect(list).toHaveLength(3)             // 配列の長さの判定
expect(() => doSomething()).toThrow()    // 例外を投げるか
expect(value).not.toBe(3)                // not で否定

オブジェクトの比較に toBe を使うと参照が違うので落ちます。オブジェクトや配列は toEqual を使います。

まとめ

• Vite プロジェクトなら npm i -D vitest + test スクリプトだけで動き出す
• test / expect は vitest から import する
• vitest はウォッチ、vitest run は 1 回実行。CI は後者

設定ファイルをほとんど書かずに始められるので、「テストを書く前の準備で疲れる」ことがないのが一番ありがたいところでした。