Vitest Arayüzü

Vite tarafından desteklenen Vitest, testleri çalıştırırken içinde bir geliştirme sunucusu bulundurur. Bu, Vitest'in testlerinizi görüntülemek ve onlarla etkileşim kurmak için kullanışlı bir arayüz sunmasını sağlar. Vitest Arayüzü isteğe bağlıdır ve aşağıdaki komutla kurulabilir:

npm i -D @vitest/ui

Ardından, --ui parametresiyle testleri Arayüz ile başlatabilirsiniz:

vitest --ui

Vitest Arayüzüne şu adresten erişebilirsiniz: http://localhost:51204/__vitest__/

UI bir raporlayıcı olarak da kullanılabilir. Vitest yapılandırmanızda 'html' raporlayıcısını kullanarak HTML çıktısı oluşturabilir ve test sonuçlarını önizleyebilirsiniz:

// vitest.config.ts

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

Vitest UI'da kapsama raporunuzu kontrol edebilirsiniz: daha fazla ayrıntı için Vitest UI Kapsamı konusuna bakın.

WARNING

Testlerinizin terminalde gerçek zamanlı olarak nasıl çalıştığını görmek isterseniz, reporters seçeneğine default raporlayıcısını eklemeyi unutmayın: ['default', 'html'].

TIP

HTML raporunuzu görüntülemek için vite preview komutunu kullanabilirsiniz:

npx vite preview --outDir ./html

outputFile yapılandırma seçeneğiyle çıktının konumunu yapılandırabilirsiniz. Burada .html uzantılı bir dosya yolu belirtmeniz gerekir. Örneğin, ./html/index.html varsayılan değerdir.