javascript-testing

JavaScript/TypeScript テストスキル

有効にするタイミング

次の場合にこのスキルを有効にします。

• JavaScript または TypeScript のテストを作成するとき
• Svelte、React、または Vue コンポーネントをテストするとき
• Vitest または Jest の設定を行うとき
• モック、スパイ、またはテストユーティリティを扱うとき
• テストを実行する、またはカバレッジを確認するとき

フレームワークの選択

ユースケース	フレームワーク
SvelteKit、Vite のプロジェクト	Vitest（推奨）
Vite を使用しないプロジェクト、React Native	Jest

クイックコマンド

Vitest

npx vitest              # Watch mode
npx vitest run          # Single run (CI)
npx vitest run --coverage
npx vitest --ui         # Visual UI

Jest

pnpm test
pnpm test --watch
pnpm test --coverage

テスト構成：AAA パターン

import { describe, it, expect, beforeEach } from 'vitest';

describe('UserService', () => {
    let userService: UserService;

    beforeEach(() => {
        userService = new UserService();
    });

    it('should create a new user with valid data', () => {
        // Arrange
        const email = '[email protected]';
        const password = 'secure_pass123';

        // Act
        const result = userService.register(email, password);

        // Assert
        expect(result.success).toBe(true);
        expect(result.user.email).toBe(email);
    });
});

Vitest のセットアップ（SvelteKit）

// vite.config.ts
import { defineConfig } from 'vitest/config';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
    plugins: [sveltekit()],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}'],
        globals: true,
        environment: 'jsdom',
        setupFiles: ['./src/tests/setup.ts'],
    }
});

モック

Vitest

import { vi } from 'vitest';

vi.mock('./api', () => ({
    fetchUser: vi.fn()
}));

vi.mocked(fetchUser).mockResolvedValue({ id: 1, name: 'John' });

Jest

jest.mock('./api', () => ({
    fetchUser: jest.fn()
}));

コンポーネントテスト（Svelte）

import { render, screen, fireEvent } from '@testing-library/svelte';
import Counter from './Counter.svelte';

it('should increment count on click', async () => {
    render(Counter, { props: { initialCount: 0 } });

    const button = screen.getByRole('button', { name: /increment/i });
    await fireEvent.click(button);

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

よく使うアサーション

// Equality
expect(value).toBe(expected);           // Strict ===
expect(value).toEqual(expected);        // Deep equality

// Truthiness
expect(value).toBeTruthy();
expect(value).toBeNull();

// Arrays/Objects
expect(array).toContain(item);
expect(obj).toHaveProperty('key');

// Exceptions
expect(() => fn()).toThrow('error');

// Async
await expect(promise).resolves.toBe(value);
await expect(promise).rejects.toThrow();

クエリの優先順位（Testing Library）

1. getByRole - アクセシブルなクエリ（最適）
2. getByLabelText - フォームフィールド
3. getByPlaceholderText - 入力欄
4. getByText - インタラクティブでない要素
5. getByTestId - 最終手段

ディレクトリ構成

src/
├── lib/
│   ├── components/
│   │   ├── Button.svelte
│   │   └── Button.test.ts
│   └── utils/
│       ├── format.ts
│       └── format.test.ts
└── tests/
    ├── setup.ts
    └── integration/

SvelteKit のテスト

Load 関数

import { load } from './+page.server';

it('should fetch posts', async () => {
    const mockFetch = vi.fn().mockResolvedValue({
        json: () => Promise.resolve([{ id: 1 }])
    });

    const result = await load({ fetch: mockFetch } as any);
    expect(result.posts).toHaveLength(1);
});

Form Actions

import { actions } from './+page.server';

it('should validate login', async () => {
    const formData = new FormData();
    formData.set('email', '[email protected]');

    const request = new Request('http://localhost', {
        method: 'POST',
        body: formData
    });

    const result = await actions.default({ request } as any);
    expect(result.success).toBe(true);
});

関連リソース

AgentUsage/testing_javascript.md を参照してください。以下を含む完全なドキュメントが記載されています。

• Jest の設定
• 非同期テストのパターン
• SvelteKit 固有のパターン
• CI/CD との統合