Hata Ayıklama

TIP

Testlerde hata ayıklarken, kesme noktalarında durulduğunda testlerin zaman aşımına uğramasını önlemek için --test-timeout CLI argümanını kullanmak isteyebilirsiniz.

VS Code

VS Code'da testlerde hızlıca hata ayıklamak için JavaScript Debug Terminal'i kullanabilirsiniz. Yeni bir JavaScript Debug Terminal açın ve doğrudan npm run test veya vitest komutlarını çalıştırın. Bu yöntem, Node.js üzerinde çalışan herhangi bir kodla uyumlu olduğundan, çoğu JavaScript test çerçevesiyle de sorunsuz çalışır.

VS Code'da bir test dosyasında hata ayıklamak için özel bir başlatma (launch) yapılandırması da ekleyebilirsiniz:

{
  // Daha fazla bilgi için şu adresi ziyaret edin: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Mevcut Test Dosyasında Hata Ayıkla",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

Ardından, hata ayıklama sekmesinde 'Mevcut Test Dosyasında Hata Ayıkla' seçeneğinin seçili olduğundan emin olun. Sonrasında hata ayıklamak istediğiniz test dosyasını açabilir ve hata ayıklamayı başlatmak için F5 tuşuna basabilirsiniz.

Tarayıcı modu

Vitest Tarayıcı Modu'nda hata ayıklamak için, CLI'da --inspect veya --inspect-brk parametrelerini belirtin ya da Vitest yapılandırmanızda tanımlayın:

CLI

vitest --inspect-brk --browser --no-file-parallelism

vitest.config.js

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    inspectBrk: true,
    fileParallelism: false,
    browser: {
      name: 'chromium',
      provider: 'playwright',
    },
  },
});

Varsayılan olarak Vitest, hata ayıklama portu olarak 9229 portunu kullanacaktır. Bunu --inspect-brk parametresine bir değer atayarak geçersiz kılabilirsiniz:

vitest --inspect-brk=127.0.0.1:3000 --browser --no-file-parallelism

Vitest'i başlatmak ve tarayıcıda hata ayıklayıcıyı bağlamak için aşağıdaki VSCode Bileşik (Compound) yapılandırmasını kullanın:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Vitest Tarayıcıyı Çalıştır",
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "console": "integratedTerminal",
      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Vitest Tarayıcıya Bağlan",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Vitest Tarayıcıda Hata Ayıkla",
      "configurations": ["Vitest Tarayıcıya Bağlan", "Vitest Tarayıcıyı Çalıştır"],
      "stopAll": true
    }
  ]
}

IntelliJ IDEA

Bir vitest çalıştırma (run) yapılandırması oluşturun. Tüm testleri hata ayıklama modunda çalıştırmak için aşağıdaki ayarları kullanın:

Ayar	Değer
Çalışma dizini	/path/to/your-project-root

Ardından bu yapılandırmayı hata ayıklama modunda çalıştırın. IDE, düzenleyicide ayarlanan JS/TS kesme noktalarında duracaktır.

Node Inspector, örn. Chrome DevTools

Vitest, IDE'ler olmadan da testlerde hata ayıklamayı destekler. Ancak bunun için testlerin paralel çalıştırılmaması gerekir. Vitest'i başlatmak için aşağıdaki komutlardan birini kullanın:

# Tek bir worker'da çalıştırmak için
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# Tek bir alt süreçte çalıştırmak için
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

# Tarayıcı modunda çalıştırmak için
vitest --inspect-brk --browser --no-file-parallelism

Vitest 1.1 veya daha yüksek bir sürüm kullanıyorsanız, sadece --no-file-parallelism bayrağını da sağlayabilirsiniz:

# Havuz tipi belirsizse
vitest --inspect-brk --no-file-parallelism

Vitest başladıktan sonra yürütmeyi durduracak ve Node.js inspector'a bağlanabilen geliştirici araçlarını açmanızı bekleyecektir. Bunun için tarayıcıda chrome://inspect adresini açarak Chrome DevTools'u kullanabilirsiniz.

İzleme modunda, --poolOptions.threads.isolate false seçeneğini kullanarak testlerin yeniden çalıştırılması sırasında hata ayıklayıcıyı açık tutabilirsiniz.