JestとVitest、どっちを選ぶ？プロジェクト別おすすめテストフレームワークの選び方

Q1. ビルドツールにViteを使っている？
  → YES → Vitest
  → NO ↓

Q2. 既存のJestテストが大量にある？
  → YES → Jest（無理に移行しない）
  → NO ↓

Q3. Node.js / NestJSのバックエンド？
  → YES → Jest（安定・実績重視）
  → NO ↓

Q4. 新規プロジェクト？
  → YES → Vitest（モダン・高速）
  → NO → 現状維持（動いてるものは触らない）

# Jestをアンインストール、Vitestをインストール
npm uninstall jest ts-jest @types/jest
npm install -D vitest

// vite.config.ts に追加するだけ
/// 
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    globals: true,       // describe, it, expectをimportなしで使える
    environment: 'jsdom', // DOM操作が必要な場合
  },
});

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run"
  }
}

// Jest
jest.mock('./api');
const mockFn = jest.fn();

// Vitest（viをimportするだけ）
import { vi } from 'vitest';
vi.mock('./api');
const mockFn = vi.fn();

// lib/tax.ts
export function calcTaxIncluded(price: number, taxRate = 0.1): number {
  return Math.floor(price * (1 + taxRate));
}

// lib/tax.test.ts
import { calcTaxIncluded } from './tax';

describe('calcTaxIncluded', () => {
  it('税率10%で税込価格を計算する', () => {
    expect(calcTaxIncluded(1000)).toBe(1100);
  });

  it('小数点以下を切り捨てる', () => {
    expect(calcTaxIncluded(999)).toBe(1098);
  });

  it('税率を指定できる', () => {
    expect(calcTaxIncluded(1000, 0.08)).toBe(1080);
  });
});

// services/user.ts
export async function getUser(id: string) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error('User not found');
  return res.json();
}

// services/user.test.ts
import { getUser } from './user';
import { vi } from 'vitest'; // Jestならこの行を削除

// fetchをモック
global.fetch = vi.fn(); // Jestなら jest.fn()

describe('getUser', () => {
  it('ユーザー情報を返す', async () => {
    (fetch as any).mockResolvedValueOnce({
      ok: true,
      json: async () => ({ id: '1', name: '田中' }),
    });

    const user = await getUser('1');
    expect(user.name).toBe('田中');
  });

  it('404でエラーを投げる', async () => {
    (fetch as any).mockResolvedValueOnce({ ok: false });

    await expect(getUser('999')).rejects.toThrow('User not found');
  });
});

# Testing Libraryのインストール
npm install -D @testing-library/react @testing-library/jest-dom jsdom

// components/Counter.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import { Counter } from './Counter';

describe('Counter', () => {
  it('ボタンを押すとカウントが増える', () => {
    render();

    const button = screen.getByRole('button', { name: '+1' });
    fireEvent.click(button);

    expect(screen.getByText('1')).toBeInTheDocument();
  });
});