Başlangıç

Genel Bakış

Vitest, Vite tarafından desteklenen, olağanüstü hızlı bir birim test çerçevesidir.

Projenin arkasındaki mantığı Neden Vitest bölümünde bulabilirsiniz.

Vitest'i Çevrimiçi Deneyin

Vitest'i StackBlitz üzerinde çevrimiçi olarak deneyebilirsiniz. Vitest'i doğrudan tarayıcıda çalıştırır ve yerel kurulumla neredeyse aynıdır; ancak, bilgisayarınıza 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

TIP

Vitest, Vite >=v3.0.0 ve Node >=v14.18 gerektirir.

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

npx komutu, komutun çalışması için gereken paketleri yükleyerek, komutu yerel bir node_modules/.bin dizininden çalıştırır. Varsayılan olarak, npx, komutun $PATH'te veya yerel proje ikililerinde bulunup bulunmadığını kontrol eder ve çalıştırır. Komut bulunamazsa, yürütülmeden önce yüklenir.

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';

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

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

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

Son olarak, kullandığınız paket yöneticisine bağlı olarak npm run test, yarn test veya pnpm test komutunu çalıştırı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 (transform 23ms, setup 0ms, collect 16ms, tests 2ms, environment 0ms, prepare 106ms)

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

Vitest'i Yapılandırma

Vitest'in temel avantajlarından biri, Vite ile birleşik yapılandırmasıdır. Eğer varsa, vitest, Vite uygulamanızla aynı eklentiler ve kurulumla eşleşmek için kök vite.config.ts dosyanızı okuyacaktır. Örneğin, Vite resolve.alias ve plugins yapılandırmalarınız hemen çalışacaktır. Test sırasında farklı bir yapılandırma kullanmak istiyorsanız, şunları yapabilirsiniz:

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

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

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

import { defineConfig } from 'vitest/config';

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

TIP

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

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

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

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

Yapılandırma Referansı bölümünde yapılandırma seçeneklerinin listesine bakın.

WARNING

Vite ve Vitest için iki ayrı yapılandırma dosyasına sahip olmaya karar verirseniz, Vitest yapılandırma dosyanızda aynı Vite seçeneklerini tanımladığınızdan emin olun, çünkü bu Vite dosyanızı geçersiz kılacak, onu 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

Vitest Çalışma Alanları'nı kullanarak aynı proje içerisinde farklı proje yapılandırmalarını çalıştırabilirsiniz. vitest.workspace dosyasında çalışma alanınızı tanımlayan bir dosya ve klasör listesi tanımlayabilirsiniz. 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 bekler
  // veya bir yapılandırma dosyasının bulunduğu dizinler.
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // Aynı testleri bile çalıştırabilirsiniz,
  // ancak aynı "vitest" işleminde farklı yapılandırmalarla.
  {
    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ı Arabirimi

Vitest'in yüklü olduğu bir projede, npm komut dosyalarınızda vitest ikilisini kullanabilir veya doğrudan npx vitest ile çalıştırabilirsiniz. İşte iskelelenmiş bir Vitest projesindeki varsayılan npm komut dosyaları:

{
  "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. 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.

IDE Tümleştirmeleri

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ükleyin

IDE Entegrasyonları hakkında daha fazla bilgi edinin.

Örnekler

Örnek	Kaynak	Deneme Ortamı
basic	GitHub	Çevrimiçi Oyna
fastify	GitHub	Çevrimiçi Oyna
graphql	GitHub	Çevrimiçi Oyna
image-snapshot	GitHub	Çevrimiçi Oyna
lit	GitHub	Çevrimiçi Oyna
mocks	GitHub	Çevrimiçi Oyna
nextjs	GitHub	Çevrimiçi Oyna
playwright	GitHub
puppeteer	GitHub
react-enzyme	GitHub	Çevrimiçi Oyna
react-mui	GitHub	Çevrimiçi Oyna
react-storybook	GitHub	Çevrimiçi Oyna
react-testing-lib-msw	GitHub	Çevrimiçi Oyna
react-testing-lib	GitHub	Çevrimiçi Oyna
react	GitHub	Çevrimiçi Oyna
ruby	GitHub	Çevrimiçi Oyna
solid	GitHub	Çevrimiçi Oyna
svelte	GitHub	Çevrimiçi Oyna
vitesse	GitHub	Çevrimiçi Oyna
vue-jsx	GitHub	Çevrimiçi Oyna
vue	GitHub	Çevrimiçi Oyna
vue2	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ış Değişiklikleri Kullanma

En son özellikleri denemek için yeni bir sürümün yayınlanmasını beklemek istemiyorsanız, vitest deposunu yerel makinenize klonlamanız ve ardından kendiniz oluşturup bağlamanız gerekecektir (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.

Sonrasında, Vitest'i kullandığınız projede pnpm link --global vitest komutunu çalıştırın (veya Vitest'i global olarak bağladığınız paket yöneticisini kullanın).

Topluluk

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