Hata Ayıklama

TIP

Testlerde hata ayıklarken aşağıdaki seçenekleri kullanmak isteyebilirsiniz:

• Kesme noktalarında durulduğunda testlerin zaman aşımına uğramasını önlemek için --test-timeout=0 kullanılabilir.
• Test dosyalarının paralel çalışmasını engellemek için --no-file-parallelism kullanılabilir.

VS Code

VS Code'da testlerde hata ayıklamanın hızlı yolu JavaScript Debug Terminal aracılığıyladır. Yeni bir JavaScript Debug Terminal açın ve npm run test veya doğrudan vitest komutunu çalıştırın. Bu yöntem, Node.js üzerinde çalışan herhangi bir kodla uyumlu olduğundan, çoğu JS test framework'ü ile de çalışır.

VS Code'da bir test dosyasında hata ayıklamak için özel bir başlatma 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": "Geçerli 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 'Geçerli Test Dosyasında Hata Ayıkla' seçeneğinin seçili olduğundan emin olun. Daha sonra 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ı Modunda hata ayıklamak için, CLI'da --inspect veya --inspect-brk bayraklarını geçirin veya 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: {
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
    },
  },
});

Varsayılan olarak Vitest, hata ayıklama için 9229 portunu kullanır. Bunu --inspect-brk içinde bir değer geçirerek değiştirebilirsiniz:

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 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 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 kullanmadan 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 belirtilmemişse
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ınızda chrome://inspect adresini açarak Chrome DevTools'u kullanabilirsiniz.

İzleme modunda, --poolOptions.threads.isolate false seçenekleriyle testler yeniden çalıştırılırken hata ayıklayıcıyı açık tutabilirsiniz.