디버깅

TIP

테스트 디버깅 시 다음 옵션을 사용하는 것이 좋습니다:

--test-timeout=0를 사용하여 중단점에서 멈출 때 테스트가 타임아웃되는 것을 방지합니다.
--no-file-parallelism를 사용하여 테스트 파일의 병렬 실행을 방지합니다.

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: {
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
    },
  },
});

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

bash

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

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

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)