VitestAdvanced Techniques dengan Claude Code

Vitestで高品質なtestスイートをpembangunan

Vitest Viteベース cepattestframework.Jest互換 API 加え、TypeScript ネイティブサポート、HMRdukungan pemantauanモード dll.、モダンなpengembangan体験 penyediaan.Claude Code kompleksなtestシナリオ コードgenerate 非常 優れてい.

高度なmock戦略

Claude Code modulmock 設計 依頼し.

> 外部APIclient mock 設計して。
> request・response 型チェック付き、errorケース juga 含めて。

import { describe, it, expect, vi, beforeEach } from "vitest";
import { UserService } from "./user-service";
import { ApiClient } from "./api-client";

// modulmock
vi.mock("./api-client", () => ({
  ApiClient: vi.fn().mockImplementation(() => ({
    get: vi.fn(),
    post: vi.fn(),
    put: vi.fn(),
    delete: vi.fn(),
  })),
}));

describe("UserService", () => {
  let service: UserService;
  let mockClient: ReturnType<typeof vi.mocked<ApiClient>>;

  beforeEach(() => {
    vi.clearAllMocks();
    mockClient = new ApiClient() as any;
    service = new UserService(mockClient);
  });

  it("penggunadaftar pengambilan", async () => {
    const mockUsers = [
      { id: "1", name: "Alice", email: "[email protected]" },
      { id: "2", name: "Bob", email: "[email protected]" },
    ];

    vi.mocked(mockClient.get).mockResolvedValue({ data: mockUsers });

    const result = await service.getUsers();

    expect(mockClient.get).toHaveBeenCalledWith("/users");
    expect(result).toEqual(mockUsers);
  });

  it("APIerror時 カスタムexception スロー", async () => {
    vi.mocked(mockClient.get).mockRejectedValue(
      new Error("Network Error")
    );

    await expect(service.getUsers()).rejects.toThrow("pengguna pengambilan gagalしま");
  });
});

parametertest（test.each）

同じロジック 複数 parameter verifikasi pola.

describe("validasifungsi", () => {
  it.each([
    { input: "[email protected]", expected: true },
    { input: "[email protected]", expected: true },
    { input: "invalid-email", expected: false },
    { input: "@no-local.com", expected: false },
    { input: "no-domain@", expected: false },
    { input: "", expected: false },
  ])("isValidEmail($input) => $expected", ({ input, expected }) => {
    expect(isValidEmail(input)).toBe(expected);
  });

  it.each`
    password         | minLength | hasUpper | hasNumber | expected
    ${"Abc12345"}    | ${8}      | ${true}  | ${true}   | ${true}
    ${"abc12345"}    | ${8}      | ${false} | ${true}   | ${false}
    ${"short"}       | ${8}      | ${false} | ${false}  | ${false}
    ${"NoNumbers"}   | ${8}      | ${true}  | ${false}  | ${false}
  `(
    "パスワード強度チェック: $password",
    ({ password, expected }) => {
      expect(isStrongPassword(password)).toBe(expected);
    }
  );
});

pembuatan カスタムマッチャー

proyek固有 アサーション definisi bisa dilakukan.

// vitest.setup.ts
import { expect } from "vitest";

expect.extend({
  toBeWithinRange(received: number, floor: number, ceiling: number) {
    const pass = received >= floor && received <= ceiling;
    return {
      message: () =>
        `expected ${received} to be within range ${floor} - ${ceiling}`,
      pass,
    };
  },

  toBeValidDate(received: string) {
    const date = new Date(received);
    const pass = !isNaN(date.getTime());
    return {
      message: () => `expected "${received}" to be a valid date string`,
      pass,
    };
  },

  toMatchApiResponse(received: unknown) {
    const pass =
      typeof received === "object" &&
      received !== null &&
      "data" in received &&
      "meta" in received;
    return {
      message: () => `expected value to match API response shape`,
      pass,
    };
  },
});

// 型definisi
declare module "vitest" {
  interface Assertion<T = any> {
    toBeWithinRange(floor: number, ceiling: number): void;
    toBeValidDate(): void;
    toMatchApiResponse(): void;
  }
}

pemanfaatan スナップショットtest

komponenやデータstruktur スナップショットtest.

import { render } from "@testing-library/react";

describe("UserProfile", () => {
  it("profilカード 正しくrenderingされる", () => {
    const { container } = render(
      <UserProfile
        user={{
          id: "1",
          name: "testpengguna",
          email: "[email protected]",
          role: "admin",
        }}
      />
    );

    expect(container).toMatchSnapshot();
  });

  it("インラインスナップショット APIresponse verifikasi", () => {
    const response = transformUserResponse(rawData);

    expect(response).toMatchInlineSnapshot(`
      {
        "displayName": "testpengguna",
        "email": "[email protected]",
        "isAdmin": true,
      }
    `);
  });
});

optimasi testcoverage

// vitest.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "json", "html", "lcov"],
      include: ["src/**/*.{ts,tsx}"],
      exclude: [
        "src/**/*.d.ts",
        "src/**/*.test.{ts,tsx}",
        "src/**/*.stories.{ts,tsx}",
        "src/types/**",
        "src/**/index.ts",
      ],
      thresholds: {
        statements: 80,
        branches: 75,
        functions: 80,
        lines: 80,
      },
    },
    setupFiles: ["./vitest.setup.ts"],
    environment: "jsdom",
    globals: true,
  },
});

pola 非同期test

タイマーやevent待機 dll.、非同期pemrosesan test手法.

describe("非同期pemrosesan test", () => {
  it("デバウンスfungsi 正しく動作", async () => {
    vi.useFakeTimers();

    const fn = vi.fn();
    const debounced = debounce(fn, 300);

    debounced("a");
    debounced("b");
    debounced("c");

    expect(fn).not.toHaveBeenCalled();

    vi.advanceTimersByTime(300);

    expect(fn).toHaveBeenCalledTimes(1);
    expect(fn).toHaveBeenCalledWith("c");

    vi.useRealTimers();
  });

  it("リトライロジック 正しく動作", async () => {
    const fn = vi
      .fn()
      .mockRejectedValueOnce(new Error("1回目gagal"))
      .mockRejectedValueOnce(new Error("2回目gagal"))
      .mockResolvedValue("berhasil");

    const result = await retry(fn, { maxAttempts: 3, delay: 100 });

    expect(result).toBe("berhasil");
    expect(fn).toHaveBeenCalledTimes(3);
  });
});

Summary

Vitest cepatな実行速度 dan モダンなAPI より、testpengembangan 体験 大きく向上させ.Claude Code pemanfaatanすれば、mock設計、parametertest、カスタムマッチャー dll. 高度なtestpola juga 素早くimplementasidimungkinkan.

E2Etest implementasi Playwright E2Etest実践panduan 、APImock 詳細 MSW APImockpemanfaatanpanduan silakan lihat.Vitest公式dokumen juga konfirmasi おき.