Skip to main content

第14章：まずはユニットテストを動かす✅🧪✨

第13章で「テスト＝安心して触れるための保険🛡️」って話をしたよね。 この章は、その保険を“今日から実際に使える状態”にする回です😊💪

この章でできるようになること🎯​

  • Vitestでユニットテストを1本書いて、ちゃんと実行できる✅
  • 保存→自動で再テストの“気持ちいいループ”を作る🌀
  • VS Codeでテストをポチポチ実行＆デバッグできるようにする🖱️🐞
  • 「よくある詰まり」も先回りして潰す🔧😇

VitestはViteベースの高速テストランナーで、Jestっぽい書き心地なのが人気だよ🚀 (vitest.dev) また、Vitestは Node 20以上＆ Vite 6以上が要件だよ（2026年2月時点の公式ガイド）。(vitest.dev)

1) ユニットテストって何をテストするの？🧠🧩​

ユニットテストは、ざっくり言うと👇

  • 小さめの関数やクラスを
  • 外部（DB/HTTP/ファイル）なしで
  • 速く、何回でも、同じ結果で試す

だから最初は、こんな “外部なし” から始めるのが最高🙂✨

  • 文字列の整形（slug化、トリム、バリデーション）🔤
  • 計算（合計、税計算、割引）🧮
  • 条件分岐（ifの分かれ道）🚦

2) まずはVitestを入れる📦✨​

インストール（npm）​

npm install -D vitest

Vitestの最新は v4系が進んでいて、たとえば @vitest/ui は v4.0.18 が配布されてるよ（2026年1月時点）。(npm)

3) 設定ファイルを1枚作る🧾✨​

Viteを使っていないバックエンド寄りのNode/TSでも、**vitest.config.ts**を作るのが楽ちん😊 （defineConfig は vitest/config から読むのが分かりやすいよ）(vitest.dev)

vitest.config.ts​

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'node',
    include: ['src/**/*.test.ts'],
  },
})
  • environment: 'node' → まずはNode用のテストに集中🧑‍💻
  • include → テストファイルの場所を固定（迷子防止）🧭

4) “人生初の1本”を書いて動かす✅🎉​

例：足し算関数（src/sum.ts）​

export function sum(a: number, b: number) {
  return a + b
}

テスト（src/sum.test.ts）​

まずは インポート型で書くと、型まわりで詰まりにくいよ😊

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

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

5) コマンドを用意して、回しやすくする🧰✨​

package.json に scripts を足すよ👇

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

ポイントはここ👇😊

  • vitest は watch相当（対話的なら保存で再実行）🌀
  • vitest run は 1回だけ実行（CI向け）🏁

Vitest公式CLIでも、vitest watch（=vitest）と vitest run の違いが説明されてるよ。(vitest.dev)

実行してみよう🚀​

npm test

6) “保存→即テスト”を気持ちよくする🌀💚​

watch中に便利なのはこの感覚👇

  • ちょっと直す✍️
  • 保存💾
  • すぐ結果が返ってくる✅❌

これができると、コーディングの怖さが一気に減るよ😌🛡️

7) VS Codeでテストをポチポチ実行する🖱️🧪​

VS Codeには、VitestをTestingビューで扱える拡張があるよ。 たとえば「Vitest」（vitest.explorer）は Run/Debug/Watch をVS Code内でできるって書いてある👍 (Visual Studio Marketplace)

やることは超シンプル👇😊

  1. 拡張機能で Vitest を検索してインストール🔌
  2. 左の 🧪 Testing アイコンを開く
  3. テストがツリー表示されたら ▶ で実行！

（VS CodeのTesting機能自体の説明も公式にあるよ）(Visual Studio Code)

8) UIで“緑/赤”を眺めたい人へ🟩🟥👀​

Vitestは --ui でUIを開けるよ✨ UIを使うには @vitest/ui が必要で、足りない場合は実行時に入ることがある、と公式設定にも書かれてる。(vitest.dev) npm上でも @vitest/ui は配布されてるよ。(npm)

npm run test:ui

9) Docker内でwatchが効かないときの対処🧯🐳​

Windows＋Docker（ボリュームマウント）だと、ファイル変更イベントが拾えずwatchが止まることがある💦 そういうときは、監視ライブラリ（chokidar）の仕組みとして ポーリング監視に切り替えるのが定番の逃げ道だよ🛠️

chokidarのREADMEに、CHOKIDAR_USEPOLLING と CHOKIDAR_INTERVAL 環境変数で上書きできるって書いてある。(GitHub)

compose.yaml の例​

services:
  api:
    environment:
      - CHOKIDAR_USEPOLLING=true
      - CHOKIDAR_INTERVAL=250
  • INTERVAL はCPU負荷と相談で調整🔧（重かったら 500〜1000ms に上げる🙂）

10) よくある詰まり集😇🪓​

詰まりA：describe や it が赤線になる🔴​

原因：グローバルAPIがデフォルトで無効だから。(vitest.dev) 解決：どっちか選ぼう👇

✅おすすめ（最初はこれ）：毎回importする

  • さっきの例の書き方のままOK🙆‍♂️

🧁慣れてきたら：globalsをONにする vitest.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'node',
  },
})

さらにTSが型を理解するために tsconfig.json へ👇

{
  "compilerOptions": {
    "types": ["vitest/globals", "node"]
  }
}

詰まりB：watchが“1回だけ実行”になっちゃう😵​

Vitestは TTYじゃない環境だと watch ではなく run 相当に倒れることがあるよ（CLIでも説明あり）。(vitest.dev) 対処：

  • docker compose exec -it ... みたいに 対話モードで入る
  • VS Code拡張で watch 実行する

11) ミニ課題🎒✨​

課題1：テストを“わざと落とす”😈​

  • expect(sum(1, 2)).toBe(4) に変えてみてね
  • 失敗ログを読んで「何が違うか」を見つけよう🔍

課題2：境界値を足す🧱​

  • sum(0, 0)
  • sum(-1, 1)
  • sum(1000000, 1000000)

12) AIで時短するコツ🤖✨​

「テストは書くのが面倒…」って気持ち、めっちゃ分かる😂 ここはAIが得意！

使えるお願いテンプレ🪄​

  • 「この関数のユニットテストケースを、境界値と異常系も含めて提案して」
  • 「AAA（Arrange/Act/Assert）で書いて」
  • 「テスト名を日本語で読みやすくして」

ただし⚠️

  • テストの期待値が正しいか（特に計算・日付）は必ず自分で確認！🧠
  • “外部に依存するテスト”をAIが混ぜてきたら、いったん保留🙂（次章以降で整理するよ）

まとめ🎁😄​

この章で作ったのは、開発を強くする最初の武器👇

次の章（第15章）では、「Node標準テストランナー」という別ルートも見て、“どっちを採用する？”の判断軸を作っていこう😊🧭