Özellikler

• Vite'ın yapılandırmasını, dönüştürücülerini, çözümleyicilerini ve eklentilerini kullanır.
• Uygulamanızdaki aynı kurulumu kullanarak testleri çalıştırı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.
• Kutudan çıktığı gibi TypeScript / JSX desteği.
• Önce ESM, üst düzey await desteği.
• Tinypool ile çoklu iş parçacığı desteği.
• Tinybench ile karşılaştırmalı performans testi desteği.
• Süitler ve testler için filtreleme, zaman aşımları ve eşzamanlı çalıştırma seçenekleri.
• Projeler desteği.
• Jest uyumlu Snapshot testi.
• Doğrulamalar için yerleşik Chai + Jest expect uyumlu API'ler.
• Mocklama için yerleşik Tinyspy.
• DOM mocklama 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ı raporlama.
• Rust tarzı kaynak kodu içi test.
• expect-type aracılığıyla Tür Testi.
• Sharding Desteği.
• Yakalanmayan Hataların Raporlanması.

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

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

Vite'ın yapılandırmasını, dönüştürücülerini, çözümleyicilerini ve eklentilerini kullanarak uygulamanızdaki aynı kurulumla testleri çalıştırın.

Daha fazla bilgi için Vitest'i Yapılandırma bölümüne bakın.

İzleme Modu

$ vitest

Kaynak kodunuzu veya test dosyalarınızı değiştirdiğinizde, Vitest akıllıca modül grafiğini 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 kullanabilirsiniz.

Vitest'i --standalone bayrağıyla başlatarak arka planda çalışmaya devam etmesini sağlayın. Değişiklik olana kadar hiçbir testi çalıştırmaz. Kaynak kodu değiştiğinde, Vitest, bu kodu kullanan testler çalıştırılana kadar testleri çalıştırmaz.

Kutudan Çıktığı Gibi Ortak Web Deyimleri

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

İş 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 fazla 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 çalışmayabileceğ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 eder, böylece bir dosyadaki ortam mutasyonları diğerlerini etkilemez. İzolasyon, CLI'ye --no-isolate geçirilerek devre dışı bırakılabilir (doğruluktan ödün vererek çalışma performansı artırılır).

Test Filtreleme

Vitest, testleri filtrelemek için birçok yol 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 Eşzamanlı Çalıştırma

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

import { describe, it } from 'vitest';

// Eşzamanlı olarak işaretlenmiş iki test paralel olarak çalıştırılacaktı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ılacaktır.

import { describe, it } from 'vitest';

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

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

WARNING

Eşzamanlı testler çalıştırılırken, Snapshot'lar ve Doğrulamalar 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 ve Jest expect uyumlu API'lerle doğrulamalar için yerleşiktir.

Eşleştiriciler ekleyen üçüncü taraf kütüphaneler kullanıyorsanız, test.globals değerini true olarak ayarlamak daha iyi uyumluluk sağlayacaktır.

Mocklama

Tinyspy, vi nesnesinde jest uyumlu API'lerle mocklama 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 mocklamak için hem happy-dom hem de jsdom desteği sunar. Bunlar Vitest ile birlikte gelmez, bunları ayrı olarak yüklemeniz gerekir:

happy-dom

$ npm i -D happy-dom

jsdom

$ npm i -D jsdom

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

import { defineConfig } from 'vitest/config';

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

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

Kapsam

Vitest, v8 aracılığıyla Yerel kod kapsamını ve istanbul aracılığıyla enstrümante 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, uygulamanızla birlikte kaynak kodunuz içinde testleri çalıştırmanın bir yolunu sunar.

Bu, testlerin uygulamalarla aynı kapanışı paylaşmasını ve dışa aktarmaya gerek kalmadan özel durumları test etmesini sağlar. Aynı zamanda, geliştirme için geri bildirim döngüsünü de kısaltır.

// 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ı kıyaslamak 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 string tipinde bekleniyor
  assertType(mount({ name: 42 }));
});

Parçalama

--shard ve --reporter=blob bayraklarını kullanarak testleri farklı makinelerde çalıştırın. Tüm test ve kapsam sonuçları, CI hattınızın sonunda --merge-reports komutu kullanılarak birleştirilebilir:

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

Daha fazla bilgi için Performansı İyileştirme | Sharding 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_ ön ekli ortam değişkenlerini otomatik olarak yükler ve Vite'ın belirlenmiş kuralına uygun olarak çalışır. .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 seçilmesini belirler
    env: loadEnv(mode, process.cwd(), ''),
  },
}));

İşlenmeyen Hatalar

Varsayılan olarak, Vitest tüm işlenmeyen reddetmeleri, yakalanmayan istisnaları (Node.js'de) ve hata olaylarını ( tarayıcıda) yakalar ve raporlar.

Bu raporlama davranışını, hataları manuel olarak işleyerek devre dışı bırakabilirsiniz. Vitest, geri aramanın sizin tarafınızdan işlendiğini varsayar ve hatayı raporlamaz.

setup.node.js

// Node.js'de
process.on('unhandledRejection', () => {
  // kendi işleyiciniz
});

process.on('uncaughtException', () => {
  // kendi işleyiciniz
});

setup.browser.js

// tarayıcıda
window.addEventListener('error', () => {
  // kendi işleyiciniz
});

window.addEventListener('unhandledrejection', () => {
  // kendi işleyiciniz
});

Alternatif olarak, dangerouslyIgnoreUnhandledErrors seçeneğiyle bildirilen hataları da yoksayabilirsiniz. Vitest bunları yine de raporlayacaktır, ancak test sonucunu etkilemeyeceklerdir (çıkış kodu değişmeyecektir).

Eğer hatanın yakalanmadığını test etmeniz gerekiyorsa, aşağıdaki gibi bir test oluşturabilirsiniz:

test('fonksiyonum yakalanmayan bir hata fırlatıyor', async ({ onTestFinished }) => {
  onTestFinished(() => {
    // olay test sırasında hiç çağrılmadıysa,
    // bir sonraki test başlamadan önce kaldırıldığından emin olun
    process.removeAllListeners('unhandledrejection');
  });

  return new Promise((resolve, reject) => {
    process.once('unhandledrejection', error => {
      try {
        expect(error.message).toBe('my error');
        resolve();
      } catch (error) {
        reject(error);
      }
    });

    callMyFunctionThatRejectsError();
  });
});