Başlarken

Genel Bakış

Vitest ("veetest" olarak telaffuz edilir), Vite tarafından desteklenen yeni nesil bir test çatısıdır.

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

Vitest'i Çevrimiçi Deneme

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 kurmanız ö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 Yazma

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

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

// sum.test.js
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ının adlarında ".test." veya ".spec." bulunması gerekir.

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 kullanın ve Vitest şu 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 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'i Yapılandırma

Vitest'in en büyük avantajlarından biri, Vite ile birleşik yapılandırmaya sahip olmasıdır. Varsa, vitest kök vite.config.ts dosyanızı okuyarak eklentilerle ve Vite uygulamanızla aynı kurulumu eşleştirecektir. Örneğin, Vite resolve.alias ve plugins yapılandırmanız ek kurulum gerektirmeden ç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 geçirin, örn. vitest --config ./path/to/vitest.config.ts.
• vite.config.ts içinde koşullu olarak farklı yapılandırma uygulamak için process.env.VITEST veya defineConfig üzerindeki mode özelliğini kullanın (üzerine yazılmazsa test olarak ayarlanacaktır).

Vitest, yapılandırma dosyanız için Vite'ın desteklediği aynı uzantıları destekler: .js, .mjs, .cjs, .ts, .cts, .mts. Vitest .json uzantısını desteklemez.

Eğer Vite'ı derleme aracı olarak kullanmıyorsanız, Vitest'i yapılandırma dosyanızda test özelliği aracılığıyla yapılandırabilirsiniz:

import { defineConfig } from 'vitest/config';

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

TIP

Kendiniz Vite kullanmasanız bile, Vitest dönüşüm hattı için büyük ölçüde ona güvenir. Bu nedenle, Vite belgelerinde açıklanan herhangi bir özelliği de yapılandırabilirsiniz.

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

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

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

<reference types="vitest" /> Vitest 3'te çalışmayı durduracak, ancak Vitest 2.1'de 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 listesini Yapılandırma Referansı bölümünde bulabilirsiniz.

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. Aksi takdirde, Vitest yapılandırması Vite dosyanızı geçersiz kılacak, genişletmeyecektir. Ayrıca Vite yapılandırmasını Vitest yapılandırmasıyla birleştirmek için vite veya vitest/config girişlerinden mergeConfig yöntemini de 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.

Çalışma Alanları Desteği

Aynı proje içinde farklı proje yapılandırmalarını Vitest Çalışma Alanları ile çalıştırın. Çalışma alanınızı tanımlayan dosya ve klasörlerin listesini vitest.workspace dosyasında belirtebilirsiniz. Dosya js/ts/json uzantılarını destekler. Bu özellik monorepo kurulumlarıyla harika çalışır.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // Çalışma alanlarınızı tanımlamak için bir glob desenleri listesi kullanabilirsiniz.
  // Vitest, bir yapılandırma dosyaları listesi veya yapılandırma dosyalarını içeren 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ü

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

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

Dosya değişikliklerini izlemeden testleri bir kez çalıştırmak için vitest run kullanın. --port veya --https gibi ek CLI seçenekleri belirtebilirsiniz. Tüm CLI seçeneklerinin tam listesi için projenizde npx vitest --help komutunu çalıştırın.

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

Otomatik Bağımlılık Kurulumu

Vitest, belirli bağımlılıklar yüklü değilse bunları kurmanızı isteyecektir. Bu davranışı VITEST_SKIP_INSTALL_CHECKS=1 ortam değişkenini ayarlayarak devre dışı bırakabilirsiniz.

IDE Entegrasyonları

Vitest ile test deneyiminizi geliştirmek için Visual Studio Code için resmi bir uzantı da sağladık.

VS Code Marketplace'ten Yükle

IDE Entegrasyonları hakkında daha fazla bilgi edinin.

Örnekler

Örnek	Kaynak	Deneme Ortamı
basic	GitHub	Çevrimiçi Dene
fastify	GitHub	Çevrimiçi Dene
in-source-test	GitHub	Çevrimiçi Dene
lit	GitHub	Çevrimiçi Dene
vue	GitHub	Çevrimiçi Dene
marko	GitHub	Çevrimiçi Dene
preact	GitHub	Çevrimiçi Dene
react	GitHub	Çevrimiçi Dene
solid	GitHub	Çevrimiçi Dene
svelte	GitHub	Çevrimiçi Dene
sveltekit	GitHub	Çevrimiçi Dene
profiling	GitHub	Mevcut Değil
typecheck	GitHub	Çevrimiçi Dene
workspace	GitHub	Çevrimiçi Dene

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 dalda (main branch) yapılan her commit ve cr-tracked etiketli bir PR pkg.pr.new adresinde yayımlanır. npm i https://pkg.pr.new/vitest@{commit} ile yükleyebilirsiniz.

Kendi değişikliğinizi 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ım için tercih ettiğiniz paket yöneticisini kullanabilirsiniz

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

Topluluk

Sorularınız varsa veya yardıma ihtiyacınız olursa, Discord ve GitHub Tartışmaları üzerinden topluluğa ulaşabilirsiniz.