Başlarken

Genel Bakış

Vitest ("vi-test" olarak telaffuz edilir), Vite tarafından desteklenen yeni nesil bir test çerçevesidir.

Projenin arkasındaki mantık hakkında daha fazla bilgiyi Neden Vitest bölümünde bulabilirsiniz.

Vitest'i Çevrimiçi Deneyin

Vitest'i StackBlitz üzerinden çevrimiçi deneyebilirsiniz. Vitest'i doğrudan tarayıcıda çalıştırır ve yerel kurulumla neredeyse aynı işlevselliği sunar; ancak makinenize herhangi bir şey yüklemenizi gerektirmez.

Projenize Vitest Ekleme

Video ile nasıl kurulacağını öğrenin

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

Vitest, Vite >=v5.0.0 ve Node >=v18.0.0 gerektirir.

Yukarıda listelenen yöntemlerden birini kullanarak vitest'i package.json dosyanıza bir geliştirme bağımlılığı olarak eklemeniz önerilir. Ancak, vitest'i doğrudan çalıştırmayı tercih ederseniz, npx vitest kullanabilirsiniz (npx aracı npm ve Node.js ile birlikte gelir).

npx aracı belirtilen komutu çalıştırır. Varsayılan olarak, npx önce komutun yerel projenin ikili dosyalarında bulunup bulunmadığını kontrol eder. Orada bulunamazsa, npx sistemin $PATH'ine bakar ve bulunursa çalıştırır. Komut her iki konumda da bulunamazsa, npx çalıştırmadan önce geçici bir konuma yükler.

Test Yazımı

Örnek olarak, iki sayıyı toplayan bir fonksiyonun çıktısını doğrulayan basit bir test yazacağız.

export function sum(a, b) {
  return a + b;
}

import { expect, test } from 'vitest';
import { sum } from './sum.js';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

TIP

Varsayılan olarak, test dosyaları adlarında .test. veya .spec. içermelidir.

Ardından, testi çalıştırmak için package.json dosyanıza aşağıdaki bölümü ekleyin:

{
  "scripts": {
    "test": "vitest"
  }
}

Son olarak, paket yöneticinize bağlı olarak npm run test, yarn test veya pnpm test komutunu çalıştırın; Vitest aşağıdaki mesajı yazdıracaktır:

✓ sum.test.js (1)
  ✓ adds 1 + 2 to equal 3

Test Files  1 passed (1)
     Tests  1 passed (1)
  Start at  02:15:44
  Duration  311ms

WARNING

Paket yöneticiniz olarak Bun kullanıyorsanız, bun test komutu yerine bun run test komutunu kullandığınızdan emin olun, aksi takdirde Bun kendi test çalıştırıcısını çalıştıracaktır.

Vitest kullanımı hakkında daha fazla bilgi için API bölümüne bakın.

Vitest Yapılandırması

Vitest'in ana avantajlarından biri, Vite ile birleşik bir yapılandırmaya sahip olmasıdır. Kök vite.config.ts dosyanız mevcutsa, Vitest onu okuyarak Vite uygulamanızdaki eklentileri ve kurulumu kullanacaktır. Örneğin, Vite resolve.alias ve plugins yapılandırmanız doğrudan çalışacaktır. Test sırasında farklı bir yapılandırma istiyorsanız şunları yapabilirsiniz:

• Daha yüksek önceliğe sahip olacak vitest.config.ts oluşturun.
• CLI'ye --config seçeneğini kullanın, örn. vitest --config ./path/to/vitest.config.ts.
• vite.config.ts içinde farklı yapılandırmaları koşullu olarak uygulamak için defineConfig üzerinde process.env.VITEST veya mode özelliğini kullanın (geçersiz kılınmazsa test olarak ayarlanacaktır).

Vitest, yapılandırma dosyaları için Vite ile aynı uzantıları (.js, .mjs, .cjs, .ts, .cts, .mts) destekler. Ancak .json uzantısını desteklemez.

Vite'ı derleme aracı olarak kullanmıyorsanız, Vitest'i yapılandırma dosyanızdaki test özelliğini kullanarak yapılandırabilirsiniz:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // ...
  },
});

TIP

Vite'ı kendiniz kullanmasanız bile, Vitest dönüşüm süreçleri için büyük ölçüde ona bağımlıdır. Bu yüzden, Vite belgelerinde açıklanan herhangi bir özelliği de yapılandırabilirsiniz.

Zaten Vite kullanıyorsanız, Vite yapılandırmanıza test özelliğini ekleyin. Ayrıca, yapılandırma dosyanızın en üstüne üç eğik çizgi yönergesi ile Vitest türlerine bir referans eklemeniz gerekecektir.

/// <reference types="vitest" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    // ...
  },
});

<reference types="vitest" /> bir sonraki ana güncellemede kullanımdan kalkacak, ancak Vitest 2.1'den itibaren vitest/config'e geçiş yapmaya başlayabilirsiniz:

/// <reference types="vitest/config" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    // ... Seçenekleri buraya belirtin.
  },
});

Yapılandırma seçeneklerinin listesi için Yapılandırma Referansı bölümüne bakın.

WARNING

Vite ve Vitest için iki ayrı yapılandırma dosyası kullanmaya karar verirseniz, Vitest yapılandırma dosyanızda aynı Vite seçeneklerini tanımladığınızdan emin olun. Çünkü bu dosya Vite dosyanızı genişletmeyecek, aksine geçersiz kılacaktır. Ayrıca, Vite yapılandırmasını Vitest yapılandırmasıyla birleştirmek için vite veya vitest/config modüllerinden mergeConfig yöntemini kullanabilirsiniz:

vitest.config.mjs

import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config.mjs';

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      // ...
    },
  })
);

vite.config.mjs

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [Vue()],
});

Ancak, iki ayrı dosya oluşturmak yerine hem Vite hem de Vitest için aynı dosyayı kullanmanızı öneririz.

Projeler Desteği

Aynı proje içinde farklı proje yapılandırmalarını Test Projeleri ile yönetin. Projelerinizi tanımlayan dosya ve klasör listesini vitest.config dosyasında belirtebilirsiniz.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      // Projelerinizi tanımlamak için glob desenleri listesi kullanabilirsiniz.
      // Vitest, bir yapılandırma dosyaları listesi veya yapılandırma dosyalarının bulunduğu dizinler bekler.
      'packages/*',
      'tests/*/vitest.config.{e2e,unit}.ts',
      // Aynı testleri bile, aynı "vitest" süreci içinde farklı yapılandırmalarla çalıştırabilirsiniz.
      {
        test: {
          name: 'happy-dom',
          root: './shared_tests',
          environment: 'happy-dom',
          setupFiles: ['./setup.happy-dom.ts'],
        },
      },
      {
        test: {
          name: 'node',
          root: './shared_tests',
          environment: 'node',
          setupFiles: ['./setup.node.ts'],
        },
      },
    ],
  },
});

Komut Satırı Arayüzü (CLI)

Vitest'in yüklü olduğu bir projede, npm betiklerinizde vitest ikili dosyasını kullanabilir veya doğrudan npx vitest ile çalıştırabilirsiniz. İşte yeni oluşturulmuş bir Vitest projesindeki varsayılan npm betikleri:

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

Dosya değişikliklerini izlemeden testleri tek seferlik çalıştırmak için vitest run komutunu kullanın. --port veya --https gibi ek CLI seçenekleri belirtebilirsiniz. Tüm CLI seçeneklerini görmek için projenizde npx vitest --help komutunu çalıştırın.

Komut Satırı Arayüzü hakkında daha fazla bilgi edinin.

Bağımlılıkların Otomatik Kurulumu

Vitest, belirli bağımlılıklar yüklü değilse bunları yüklemenizi önerecektir. Bu davranışı VITEST_SKIP_INSTALL_CHECKS=1 ortam değişkenini ayarlayarak kapatabilirsiniz.

IDE Entegrasyonları

Vitest ile test deneyiminizi geliştirmek için Visual Studio Code için resmi bir uzantı da sunuyoruz.

VS Code Marketplace'ten Yükle

IDE Entegrasyonları hakkında daha fazla bilgi edinin.

Örnekler

Örnek	Kaynak	Deneme Ortamı
basic	GitHub	Çevrimiçi Oyna
fastify	GitHub	Çevrimiçi Oyna
in-source-test	GitHub	Çevrimiçi Oyna
lit	GitHub	Çevrimiçi Oyna
vue	GitHub	Çevrimiçi Oyna
marko	GitHub	Çevrimiçi Oyna
preact	GitHub	Çevrimiçi Oyna
react	GitHub	Çevrimiçi Oyna
solid	GitHub	Çevrimiçi Oyna
svelte	GitHub	Çevrimiçi Oyna
sveltekit	GitHub	Çevrimiçi Oyna
profiling	GitHub	Yok
typecheck	GitHub	Çevrimiçi Oyna
projects	GitHub	Çevrimiçi Oyna

Vitest Kullanan Projeler

• unocss
• unplugin-auto-import
• unplugin-vue-components
• vue
• vite
• vitesse
• vitesse-lite
• fluent-vue
• vueuse
• milkdown
• gridjs-svelte
• spring-easing
• bytemd
• faker
• million
• Vitamin
• neodrag
• svelte-multiselect
• iconify
• tdesign-vue-next
• cz-git

Yayınlanmamış Commit'leri Kullanma

Ana daldaki her commit ve 'cr-tracked' etiketli PR'lar pkg.pr.new adresinde yayınlanmaktadır. npm i https://pkg.pr.new/vitest@{commit} komutuyla yükleyebilirsiniz.

Kendi değişikliklerinizi yerel olarak test etmek isterseniz, kendiniz derleyip bağlayabilirsiniz (pnpm gereklidir):

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # bu adımda tercih ettiğiniz paket yöneticisini kullanabilirsiniz

Ardından Vitest kullandığınız projeye gidin ve pnpm link --global vitest (veya Vitest'i global olarak bağladığınız paket yöneticisi) komutunu çalıştırın.

Topluluk

Sorularınız varsa veya yardıma ihtiyacınız olursa, Discord ve GitHub Tartışmaları üzerinden toplulukla iletişime geçin.