vitest-skill

Vitest テストスキル

基本パターン

基本的なテスト

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { Calculator } from './calculator';

describe('Calculator', () => {
  let calc: Calculator;
  beforeEach(() => { calc = new Calculator(); });

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

  it('throws on divide by zero', () => {
    expect(() => calc.divide(10, 0)).toThrow();
  });
});

モック（jest ではなく vi を使用）

import { vi } from 'vitest';

// Mock module
vi.mock('./database', () => ({
  getUser: vi.fn().mockResolvedValue({ name: 'Alice' }),
  saveUser: vi.fn().mockResolvedValue(true),
}));

// Mock function
const mockFn = vi.fn();
mockFn.mockReturnValue(42);
mockFn.mockResolvedValue({ data: 'test' });

// Spy
const spy = vi.spyOn(console, 'log').mockImplementation(() => {});
expect(spy).toHaveBeenCalledWith('message');
spy.mockRestore();

// Timers
vi.useFakeTimers();
vi.advanceTimersByTime(1000);
vi.runAllTimers();
vi.useRealTimers();

ソース内テスト

// src/math.ts — tests alongside code!
export function add(a: number, b: number) { return a + b; }
export function multiply(a: number, b: number) { return a * b; }

if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;
  it('adds', () => { expect(add(2, 3)).toBe(5); });
  it('multiplies', () => { expect(multiply(3, 4)).toBe(12); });
}

スナップショットテスト

it('serializes user', () => {
  expect(serializeUser(user)).toMatchSnapshot();
});

it('inline snapshot', () => {
  expect(serializeUser(user)).toMatchInlineSnapshot(`
    { "name": "Alice", "email": "[email protected]" }
  `);
});

React コンポーネントのテスト

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import Button from './Button';

describe('Button', () => {
  it('renders with label', () => {
    render(<Button label="Click me" />);
    expect(screen.getByText('Click me')).toBeDefined();
  });
});

アンチパターン

悪い例	良い例	理由
jest.fn()	vi.fn()	Vitest では vi を使用します
jest.mock()	vi.mock()	名前空間が異なります
型安全性がない	TypeScript + strict	Vitest は TypeScript を前提としています

クイックリファレンス

タスク	コマンド
1 回だけ実行	npx vitest run
ウォッチ	npx vitest（デフォルト）
UI	npx vitest --ui
カバレッジ	npx vitest --coverage
特定のファイル	npx vitest run src/math.test.ts
フィルター	npx vitest run -t "adds"

vitest.config.ts

import { defineConfig } from 'vitest/config';
export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: { provider: 'v8', reporter: ['text', 'html'] },
    include: ['src/**/*.{test,spec}.{js,ts,tsx}'],
    includeSource: ['src/**/*.{js,ts}'],
  },
});

詳細なパターン → reference/playbook.md

§	セクション	内容
1	本番環境の設定	設定、ワークスペース、セットアップファイル
2	モックのパターン	vi.mock、スパイ、タイマー、fetch
3	React Testing Library	コンポーネント、フック、プロバイダー
4	スナップショットとインラインスナップショット	ファイル、インライン、シリアライザー
5	テーブル駆動テスト	test.each、describe.each
6	ソース内テスト	ソースと同じ場所に配置するテスト
7	API／統合テスト	fetch を使ったサーバーテスト
8	CI/CD 統合	GitHub Actions、スクリプト
9	デバッグのクイックリファレンス	よくある問題 10 件
10	ベストプラクティスのチェックリスト	13 項目