Svelte入門：リファレンス CLI -vitest-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
CLIツール（sv）
vitestとは
おわりに

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

CLIツール（sv）

コマンドラインインターフェース（CLI）であるsvは、Svelteアプリケーションの作成と保守のためのツールキットです。

vitestとは

Vitestは、Viteネイティブのテストフレームワークです。

使用方法

npx sv add vitest

導入されるもの

関連パッケージがインストールされ、package.jsonにスクリプトが追加されます
Vite設定ファイルに、Svelteのクライアント/サーバーを意識したテスト設定が追加されます
デモテストが作成されます

解説

Vitestは、Vite環境に最適化されたモダンなJavaScriptテストフレームワークです。Jest互換のAPIを持ちながら、Viteの高速なHMR（Hot Module Replacement）機能を活用し、迅速なテスト実行を可能にします。

1. インストール後のテスト実行

# テストを実行
npm test

# または
npm run test

# ウォッチモードでテスト実行（ファイル変更時に自動実行）
npm run test:watch

2. 基本的なテストの書き方

// src/lib/math.js
export function sum(a, b) {
  return a + b;
}

// src/lib/math.test.js
import { describe, it, expect } from 'vitest';
import { sum } from './math';

describe('sum関数', () => {
  it('2つの数値を正しく足し合わせること', () => {
    expect(sum(1, 2)).toBe(3);
    expect(sum(-1, 1)).toBe(0);
    expect(sum(5, 5)).toBe(10);
  });
});

3. Svelteコンポーネントのテスト

// src/lib/Counter.test.js
import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Counter from './Counter.svelte';

describe('Counter.svelte', () => {
  it('初期値が0から始まること', () => {
    const { getByText } = render(Counter);
    expect(getByText('0')).toBeTruthy();
  });

  it('ボタンクリックでカウントが増加すること', async () => {
    const { getByText } = render(Counter);
    const button = getByText('カウントアップ');
    
    await fireEvent.click(button);
    expect(getByText('1')).toBeTruthy();
    
    await fireEvent.click(button);
    expect(getByText('2')).toBeTruthy();
  });
});

4. モックの使用例

// src/lib/api.js
export async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

// src/lib/api.test.js
import { describe, it, expect, vi } from 'vitest';
import { fetchUser } from './api';

describe('fetchUser', () => {
  it('ユーザー情報を正しく取得すること', async () => {
    // fetchのモック
    global.fetch = vi.fn().mockResolvedValue({
      json: vi.fn().mockResolvedValue({ id: 1, name: '山田太郎' })
    });

    const user = await fetchUser(1);
    
    expect(global.fetch).toHaveBeenCalledWith('/api/users/1');
    expect(user).toEqual({ id: 1, name: '山田太郎' });
  });
});

5. SvelteKitのエンドポイントテスト

// src/routes/api/hello/+server.js
import { json } from '@sveltejs/kit';

export function GET() {
  return json({ message: 'Hello, World!' });
}

// tests/api.test.js
import { describe, it, expect } from 'vitest';
import { GET } from '../src/routes/api/hello/+server';

describe('Hello APIエンドポイント', () => {
  it('正しいレスポンスを返すこと', async () => {
    const response = await GET();
    const data = await response.json();
    
    expect(data).toEqual({ message: 'Hello, World!' });
  });
});

Vitestの特徴と利点

高速な実行速度: Viteのエコシステムを活用し、高速なテスト実行を実現
Jest互換API: Jestから移行しやすい互換性のあるAPI
TypeScriptサポート: TypeScriptのネイティブサポート
プラグインシステム: 拡張可能なプラグインシステム
並行処理: テストファイルの並行実行によるパフォーマンス向上
スナップショットテスト: UIコンポーネントの変更検知のためのスナップショットテスト
コードカバレッジ: c8と統合されたコードカバレッジレポート

テスト設定のカスタマイズ例

// vite.config.js
import { defineConfig } from 'vitest/config';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte({ hot: !process.env.VITEST })],
  test: {
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,ts}'],
    globals: true,
    coverage: {
      reporter: ['text', 'json', 'html'],
      exclude: ['node_modules/']
    }
  }
});

npx sv add vitestコマンドを実行すると、Svelteプロジェクトに必要なテスト環境が自動的に設定され、すぐにテストを始めることができます。開発者は、テストファイルを作成するだけで、モダンで高速なテスト環境を利用できるようになります。