---

name: vitest_runner router_kit: FullStackKit description: Modern JavaScript/TypeScript testing with Vitest including mocking and coverage. metadata: skillport: category: auto-healed tags: [architecture, assertions, automation, best practices, clean code, coding, collaboration, compliance, debugging, design patterns, development, documentation, efficiency, git, jest compatible, mocking, optimization, productivity, programming, project management, quality assurance, refactoring, software engineering, standards, testing, unit testing, utilities, version control, vite, vitest runner, workflow]

Vitest

Description

Modern JavaScript/TypeScript testing with Vitest including mocking and coverage.

When to Use

• Testing JavaScript/TypeScript
• React component testing
• Unit and integration tests

---

Core Patterns

Basic Tests

Copyimport { describe, it, expect } from 'vitest';

describe('math', () => {
  it('should add numbers', () => {
    expect(1 + 1).toBe(2);
  });

  it('should throw on invalid input', () => {
    expect(() => divide(1, 0)).toThrow('Division by zero');
  });
});

Mocking

Copyimport { vi, describe, it, expect } from 'vitest';

// Mock module
vi.mock('./api', () => ({
  fetchUser: vi.fn().mockResolvedValue({ id: 1 })
}));

// Mock function
const callback = vi.fn();
callback('arg');
expect(callback).toHaveBeenCalledWith('arg');

Async Tests

Copyit('should fetch data', async () => {
  const data = await fetchData();
  expect(data).toEqual({ id: 1 });
});

it('should reject on error', async () => {
  await expect(fetchData()).rejects.toThrow('Error');
});

React Testing

Copyimport { render, screen } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';

it('should handle click', async () => {
  const onClick = vi.fn();
  render(<Button onClick={onClick}>Click</Button>);

  await userEvent.click(screen.getByRole('button'));
  expect(onClick).toHaveBeenCalled();
});

🔄 Workflow

Kaynak: Vitest Official Documentation & Vite + Testing Best Practices

Aşama 1: Environment & Setup

• Vite Integration: vitest.config.ts dosyasının Vite ayarlarıyla senkronize olduğunu doğrula.
• Environment Choice: Web projeleri için jsdom veya happy-dom, backend için node environment'ı seç.
• Global Mocks: Sık kullanılan harici servisler (API, LocalStorage) için setup.ts içinde global mock'ları tanımla.

Aşama 2: Unit & Component Testing

• Isolation Layer: Bağımlılıkları vi.mock() ile izole ederek sadece hedef üniteyi test et.
• Assertion Strategy: expect metodlarını kullanarak beklenen sonuçları (be.truthy, toEqual, toBeCalled) doğrula.
• Snapshot Testing: UI bileşenlerindeki (Component) beklenmedik arayüz değişikliklerini toMatchSnapshot() ile yakala.

Aşama 3: Performance & Coverage

• Watch Mode: Geliştirme sürecinde testleri watch modunda tutarak anlık geri bildirim al.
• Coverage Analysis: v8 veya istanbul provider kullanarak test kapsamını raporla.
• Dependency Cleanup: vi.clearAllMocks() ile testler arası veri kirliliğini (Pollution) önle.

Kontrol Noktaları

---

Vitest Runner v1.5 - With Workflow