Vitest

Description

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ı

*.test.ts

*.spec.ts

async/await

toBe

toEqual