Özellikler

• Vite'ın yapılandırmasını, dönüştürücülerini, çözümleyicilerini ve eklentilerini kullanır.
• Testleri çalıştırmak için uygulamanızdaki aynı yapılandırmayı kullanın!
• Testler için HMR benzeri akıllı ve anında izleme modu!
• Vue, React, Svelte, Lit, Marko ve daha fazlası için bileşen testi desteği.
• TypeScript / JSX desteği kutudan çıktığı gibi sunulur.
• Öncelikle ESM ve üst düzey await desteği.
• Tinypool aracılığıyla çoklu iş parçacıklı çalışanlar.
• Tinybench ile performans karşılaştırma (benchmarking) desteği.
• Süitler ve testler için filtreleme, zaman aşımları ve eşzamanlılık kontrolü.
• Çalışma alanı desteği.
• Jest uyumlu Snapshot testi.
• Onaylamalar için yerleşik Chai + Jest expect uyumlu API'ler.
• Sahtecilik (mocking) için yerleşik Tinyspy.
• DOM taklidi için happy-dom veya jsdom desteği.
• Tarayıcıda bileşen testlerini çalıştırmak için Tarayıcı Modu.
• v8 veya istanbul aracılığıyla kod kapsamı.
• Rust benzeri kaynak içi test.
• expect-type aracılığıyla Tür Testi.
• Parçalama (sharding) desteği.

İlk testinizi videolu olarak nasıl yazacağınızı öğrenin

Test, Geliştirme ve Derleme Arasında Paylaşılan Yapılandırma

Vitest, Vite'ın yapılandırmasını, dönüştürücülerini, çözümleyicilerini ve eklentilerini kullanarak testleri uygulamanızla aynı yapılandırmada çalıştırmanıza olanak tanır.

Daha fazla bilgi için Vitest Yapılandırma bölümüne göz atın.

İzleme Modu

$ vitest

Kaynak kodunuzu veya test dosyalarını değiştirdiğinizde, Vitest modül grafiğini akıllıca tarar ve yalnızca ilgili testleri yeniden çalıştırır; tıpkı Vite'ta HMR'nin çalıştığı gibi!

vitest geliştirme ortamında varsayılan olarak izleme modunda ve CI ortamında ( process.env.CI mevcut olduğunda) akıllıca çalıştırma modunda başlar. İstenen modu açıkça belirtmek için vitest watch veya vitest run komutlarını kullanabilirsiniz.

Vitest'i --standalone bayrağıyla başlatarak arka planda çalışmaya devam etmesini sağlayabilirsiniz. Bu modda, testler yalnızca ilgili kaynak kod veya test dosyaları değiştiğinde çalıştırılır. Kaynak kodu değiştiğinde, bu kodu içe aktaran testler çalıştırılana kadar Vitest testleri yeniden çalıştırmaz.

Kutudan Çıktığı Gibi Ortak Web Deyimleri

ES Modülü / TypeScript / JSX / PostCSS desteği kutudan çıktığı gibi sunulur.

İş Parçacıkları

Varsayılan olarak Vitest, test dosyalarını Tinypool ( Piscina'nın hafif bir fork'u) aracılığıyla node:child_process kullanarak birden çok işlemde çalıştırır ve testlerin eşzamanlı olarak çalışmasına olanak tanır. Test süitinizi daha da hızlandırmak isterseniz, node:worker_threads kullanarak testleri çalıştırmak için --pool=threads seçeneğini etkinleştirmeyi düşünebilirsiniz (bazı paketlerin bu kurulumla uyumlu olmayabileceğini unutmayın).

Testleri tek bir iş parçacığında veya işlemde çalıştırmak için poolOptions bölümüne bakın.

Vitest ayrıca her dosyanın ortamını izole ederek, bir dosyadaki ortam değişikliklerinin diğerlerini etkilemesini engeller. İzolasyon, CLI'ye --no-isolate geçirilerek devre dışı bırakılabilir (bu, doğruluktan ziyade çalışma performansını artırır).

Test Filtreleme

Vitest, testleri filtrelemek için birçok yöntem sunar, böylece test hızını artırabilir ve geliştirmeye odaklanabilirsiniz.

Daha fazla bilgi için Test Filtreleme bölümüne bakın.

Testleri Paralel Çalıştırma

Ardışık testlerde .concurrent kullanarak bunları paralel olarak başlatın.

import { describe, it } from 'vitest';

// concurrent olarak işaretlenmiş iki test paralel olarak başlatılır
describe('suite', () => {
  it('serial test', async () => {
    /* ... */
  });
  it.concurrent('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
});

Bir süitte .concurrent kullanırsanız, içindeki her test paralel olarak başlatılır.

import { describe, it } from 'vitest';

// Bu süit içindeki tüm testler paralel olarak başlatılır
describe.concurrent('suite', () => {
  it('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 3', async ({ expect }) => {
    /* ... */
  });
});

Ayrıca eşzamanlı süitler ve testlerle .skip, .only ve .todo kullanabilirsiniz. Daha fazla bilgi için API Referansı bölümüne bakın.

WARNING

Eşzamanlı testler çalıştırılırken, doğru testin algılandığından emin olmak için Snapshotlar ve Onaylamalar, yerel Test Bağlamı içindeki expect kullanmalıdır.

Snapshot

Jest uyumlu snapshot desteği.

import { expect, it } from 'vitest';

it('renders correctly', () => {
  const result = render();
  expect(result).toMatchSnapshot();
});

Daha fazla bilgi için Snapshot bölümüne bakın.

Chai ve Jest expect Uyumluluğu

Chai onaylamalar için yerleşiktir ve Jest expect uyumlu API'ler sunar.

Üçüncü taraf kitaplıklar kullanıyorsanız ve bunlar eşleştiriciler ekliyorsa, test.globals değerini true olarak ayarlamak daha iyi uyumluluk sağlayabilir.

Sahtecilik

Tinyspy, vi nesnesinde jest uyumlu API'lerle sahtecilik (mocking) için yerleşiktir.

import { expect, vi } from 'vitest';

const fn = vi.fn();

fn('hello', 1);

expect(vi.isMockFunction(fn)).toBe(true);
expect(fn.mock.calls[0]).toEqual(['hello', 1]);

fn.mockImplementation((arg: string) => arg);

fn('world', 2);

expect(fn.mock.results[1].value).toBe('world');

Vitest, DOM ve tarayıcı API'lerini sahtecilik (mocking) için hem happy-dom hem de jsdom desteği sunar. Bunlar Vitest ile birlikte gelmez; ayrı olarak yüklemeniz gerekir:

$ npm i -D happy-dom
# veya
$ npm i -D jsdom

Bundan sonra, yapılandırma dosyanızdaki environment seçeneğini değiştirin:

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

export default defineConfig({
  test: {
    environment: 'happy-dom', // veya 'jsdom', 'node'
  },
});

Daha fazla bilgi için Sahtecilik bölümüne bakın.

Kapsam

Vitest, v8 aracılığıyla yerel kod kapsamını ve istanbul aracılığıyla enstrümanlı kod kapsamını destekler.

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

Daha fazla bilgi için Kapsam bölümüne bakın.

Kaynak İçi Test

Vitest ayrıca, Rust'ın modül testlerine benzer şekilde, testleri kaynak kodunuz içinde uygulamayla birlikte çalıştırmanın bir yolunu sunar.

Bu, testlerin uygulamalarla aynı kapanımı paylaşmasını ve dışa aktarmadan özel durumları test edebilmesini sağlar. Aynı zamanda, geliştirme için geri bildirim döngüsünü de yakınlaştırır.

// src/index.ts

// uygulama
export function add(...args: number[]): number {
  return args.reduce((a, b) => a + b, 0);
}

// kaynak içi test süitleri
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;
  it('add', () => {
    expect(add()).toBe(0);
    expect(add(1)).toBe(1);
    expect(add(1, 2, 3)).toBe(6);
  });
}

Daha fazla bilgi için Kaynak içi test bölümüne bakın.

Kıyaslama Deneysel

Performans sonuçlarını karşılaştırmak için Tinybench aracılığıyla bench fonksiyonu ile kıyaslama testleri çalıştırabilirsiniz.

import { bench, describe } from 'vitest';

describe('sort', () => {
  bench('normal', () => {
    const x = [1, 5, 4, 2, 3];
    x.sort((a, b) => {
      return a - b;
    });
  });

  bench('reverse', () => {
    const x = [1, 5, 4, 2, 3];
    x.reverse().sort((a, b) => {
      return a - b;
    });
  });
});

Tip Testi Deneysel

Tip regresyonlarını yakalamak için testler yazabilirsiniz. Vitest, size benzer ve anlaşılması kolay bir API sağlamak için expect-type paketiyle birlikte gelir.

import { assertType, expectTypeOf, test } from 'vitest';
import { mount } from './mount.js';

test('my types work properly', () => {
  expectTypeOf(mount).toBeFunction();
  expectTypeOf(mount).parameter(0).toMatchTypeOf<{ name: string }>();

  // @ts-expect-error name bir string olmalıdır
  assertType(mount({ name: 42 }));
});

Parçalama

--shard ve --reporter=blob bayraklarını kullanarak testleri farklı makineler arasında dağıtın. Tüm test ve kapsam sonuçları, CI işlem hattınızın sonunda --merge-reports komutu kullanılarak birleştirilebilir:

vitest --shard=1/2 --reporter=blob
vitest --shard=2/2 --reporter=blob
vitest --merge-reports --reporter=junit --coverage.reporter=text

Daha fazla bilgi için Performansı İyileştirme | Parçalama bölümüne bakın.

Ortam Değişkenleri

Vitest, ön uçla ilgili testlerle uyumluluğu sürdürmek için .env dosyalarından yalnızca VITE_ önekli ortam değişkenlerini otomatik olarak yükler ve Vite'ın yerleşik kuralına uyar. .env dosyalarından her ortam değişkenini yine de yüklemek için vite'dan içe aktarılan loadEnv yöntemini kullanabilirsiniz:

import { loadEnv } from 'vite';
import { defineConfig } from 'vitest/config';

export default defineConfig(({ mode }) => ({
  test: {
    // mode, varsa ".env.{mode}" dosyasının hangisinin seçileceğini belirler
    env: loadEnv(mode, process.cwd(), ''),
  },
}));