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

import { 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

import { 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

it('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

import { 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