Vitest UI

Vitest, testleri çalıştırırken arka planda bir Vite geliştirme sunucusu kullanır. Bu sayede Vitest, testlerinizi görselleştirmek ve onlarla etkileşim kurmak için kullanışlı bir kullanıcı arayüzü (UI) sunar. Vitest UI isteğe bağlı bir bileşendir, bu nedenle kullanmadan önce aşağıdaki komutla yüklemeniz gerekir:

npm i -D @vitest/ui

Kurulumdan sonra, testleri UI ile başlatmak için --ui bayrağını kullanabilirsiniz:

vitest --ui

Vitest UI'ye http://localhost:51204/__vitest__/ adresinden erişebilirsiniz.

WARNING

UI etkileşimli bir araçtır ve çalışan bir Vite sunucusu gerektirir. Bu nedenle, Vitest'i watch modunda (varsayılan) çalıştırdığınızdan emin olun. Alternatif olarak, yapılandırma dosyasındaki reporters seçeneğinde html belirterek Vitest UI ile aynı görünüme sahip statik bir HTML raporu da oluşturabilirsiniz.

UI aynı zamanda bir raporlama aracı olarak da kullanılabilir. HTML çıktısı almak ve test sonuçlarınızı görüntülemek için Vitest yapılandırmanızda 'html' raporlama seçeneğini kullanın:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    reporters: ['html'],
  },
});

Test kapsam raporunuzu Vitest UI'de görüntüleyebilirsiniz; daha fazla ayrıntı için Vitest UI Kapsamı bölümüne bakın.

WARNING

Testlerinizin terminaldeki anlık çıktısını da görmek istiyorsanız, default raporlama seçeneğini reporters dizisine eklemeyi unutmayın: ['default', 'html'].

TIP

HTML raporunuzu önizlemek için vite preview komutunu kullanabilirsiniz:

npx vite preview --outDir ./html

Çıktı dizinini outputFile yapılandırma seçeneğiyle ayarlayabilirsiniz. Bu seçenekte .html uzantılı bir yol belirtmeniz gerekir. Örneğin, ./html/index.html varsayılan değerdir.