テスト: コードの品質保証

Vitest/Jest でユニットテスト。安心してリファクタ。

ユニットテスト
関数単位のテスト。
モック
依存関係を偽物に置き換え。
スナップショット
出力を保存して比較。

テスト基礎

工場の検品ロボット (Safety Inspection Robot)

テストコードは「出荷前の検品ロボット」です。「この機能はこういう入力でこう動くはず」というルール（テスト）を書いておけば、コードを変更するたびにロボットが高速でチェックしてくれます。もしバグがあれば、出荷（リリース）前にアラーム（テスト失敗）で知らせてくれます。

手動でポチポチ確認するのは時間がかかり、ミスも見逃します。自動テスト（Vitestなど）があれば、「昨日の修正が原因で、1ヶ月前の機能が壊れた」といったデグレ（リグレッション）を確実に防げます。安心してリファクタリングするための命綱です。

Vitest Example
// Vitest / Jest
import { describe, it, expect } from 'vitest';


describe('Calculator', () => {
  it('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });


  it('throws on invalid input', () => {
    expect(() => add('a', 'b')).toThrow();
  });
});


// 実行
// npm run test
// npm run test:watch
Bad
// ❌ Bad: テストなし
function add(a, b) {
    return a + b;
}
// 動くかどうかは実行するまで不明
Good
// ✅ Good: テストで保証
function add(a, b) {
    return a + b;
}
test('add', () => expect(add(2, 3)).toBe(5));

パターン

Setup, Mock, Async
// セットアップ & ティアダウン
beforeEach(() => {
  // 各テスト前に実行
});


afterEach(() => {
  // 各テスト後に実行
});


// モック
import { vi } from 'vitest';


const mockFn = vi.fn().mockReturnValue(42);
expect(mockFn()).toBe(42);
expect(mockFn).toHaveBeenCalled();


// 非同期テスト
it('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBeDefined();
});


// スナップショット
expect(component).toMatchSnapshot();
Tip: テストファイルは .test.ts か .spec.ts にする。

合格ライン

☐ describe/it/expect を使える
☐ モック関数を作成できる

演習課題

課題1: テスト作成
describe/it/expect でテストを作成してください。
課題2: モック
モック関数を使ってテストしてください。