디버깅

TIP

테스트 디버깅 시 중단점에서 멈춰 테스트가 타임아웃되는 것을 방지하려면 --test-timeout CLI 인수를 사용하는 것이 좋습니다.

VS Code

VS Code에서 테스트를 빠르게 디버깅하는 방법은 JavaScript Debug Terminal을 사용하는 것입니다. 새 JavaScript Debug Terminal을 열고 npm run test 또는 vitest를 직접 실행합니다. 이 방법은 Node.js에서 실행되는 모든 코드에 적용되므로 대부분의 JS 테스트 프레임워크에서 작동합니다.

VS Code에서 테스트 파일을 디버그하기 위한 전용 실행 구성을 추가할 수도 있습니다:

json

{
  // 자세한 정보는 다음을 참조하세요: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "현재 테스트 파일 디버그",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

그런 다음 디버그 탭에서 '현재 테스트 파일 디버그'가 선택되었는지 확인하십시오. 디버깅하려는 테스트 파일을 열고 F5를 누르면 디버깅이 시작됩니다.

브라우저 모드

Vitest 브라우저 모드를 디버그하려면 CLI에서 --inspect 또는 --inspect-brk를 전달하거나 Vitest 구성에 정의합니다:

CLIvitest.config.js

bash

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

import { defineConfig } from 'vitest/config';

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

기본적으로 Vitest는 디버깅 포트로 9229번 포트를 사용합니다. --inspect-brk에 값을 전달하여 이 포트를 재정의할 수 있습니다:

bash

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

Vitest를 실행하고 브라우저에서 디버거를 연결하려면 다음 VSCode 복합 구성을 사용하십시오:

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Vitest 브라우저 실행",
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "console": "integratedTerminal",
      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Vitest 브라우저에 연결",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Vitest 브라우저 디버그",
      "configurations": ["Vitest 브라우저에 연결", "Vitest 브라우저 실행"],
      "stopAll": true
    }
  ]
}

IntelliJ IDEA

vitest 실행 구성을 생성합니다. 디버그 모드에서 모든 테스트를 실행하려면 다음 설정을 사용합니다:

설정	값
작업 디렉토리	`/path/to/your-project-root`

그런 다음 이 구성을 디버그 모드로 실행합니다. IDE는 편집기에 설정된 JS/TS 중단점에서 멈춥니다.

Node Inspector, 예: Chrome DevTools

Vitest는 IDE 없이도 테스트 디버그를 지원합니다. 단, 이때 테스트는 병렬로 실행되지 않아야 합니다. 다음 명령 중 하나를 사용하여 Vitest를 시작하십시오.

# 단일 워커에서 실행
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# 단일 자식 프로세스에서 실행
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

# 브라우저 모드에서 실행
vitest --inspect-brk --browser --no-file-parallelism

Vitest 1.1 이상을 사용하는 경우 --no-file-parallelism 플래그만 지정할 수도 있습니다:

# 풀을 알 수 없는 경우
vitest --inspect-brk --no-file-parallelism

Vitest가 실행되면 작업을 중지하고 Node.js inspector에 연결할 수 있는 개발자 도구를 열 때까지 기다립니다. 이를 위해 브라우저에서 chrome://inspect를 열어 Chrome DevTools를 사용할 수 있습니다.

감시 모드에서는 --poolOptions.threads.isolate false 옵션을 사용하여 테스트 재실행 중에도 디버거를 계속 열어둘 수 있습니다.

디버깅 ​

VS Code ​

브라우저 모드 ​

IntelliJ IDEA ​

Node Inspector, 예: Chrome DevTools ​

디버깅

VS Code

브라우저 모드

IntelliJ IDEA

Node Inspector, 예: Chrome DevTools