Visual Studio Code를 사용하는 Mocha 중단 점

Visual Studio Code를 사용하여 Mocha 테스트에 중단 점을 추가 할 수 있습니까?

일반적으로 코드를 디버깅 할 때 launch.json을 구성하고 프로그램 속성을 실행할 자바 스크립트 파일로 설정해야합니다. 그래도 Mocha를 위해 이것을 수행하는 방법을 모르겠습니다.

시작 구성으로 이동하여 다른 구성 뒤 또는 사이에 커서를 놓고 ctrl- space를 눌러 현재 유효한 모카 구성을 자동으로 생성 한다는 것을 알고 계셨습니까 ?

나를 위해 완벽하게 잘 작동합니다. 중단 점에서 중지 포함. (나는 또한 다양한 설정 관련 이유로 더 이상하지 않은 이전의 구식이 있습니다.)

VSCode 1.21.1 (2018 년 3 월)부터이 결과는 다음과 같습니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Mocha (Test single file)",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "${workspaceRoot}/node_modules/.bin/mocha",
        "--inspect-brk",
        "${relativeFile}",
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    }
}

참고로 : debug-brk 는 더 이상 사용되지 않습니다 (최소 노드> = 버전 8 인 모든 사람에게).

--debug-brk+ Attach 를 사용하지 않거나 전역 mocha 설치에 대한 절대 경로를 지정 하지 않으려면 (launch.json을 버전 제어하에두고 여러 시스템에 여러 개발자가있는 경우 중단됨) mocha를 개발 종속성으로 설치하고 launch.json에 다음을 추가하십시오.

{
  "name": "mocha",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
  "stopOnEntry": false,
  "args": ["--no-timeouts", "--colors"], //you can specify paths to specific tests here
  "cwd": "${workspaceRoot}",
  "runtimeExecutable": null,
  "env": {
    "NODE_ENV": "testing"
  }
}

F5를 눌러 테스트에서 전체 디버깅을 지원합니다.

--no-timeouts중단 점에서 중지했기 때문에 테스트 시간이 초과 --colors되지 않도록하고, VS Code가 색상을 지원하는지 감지하지 못하더라도 Mocha가 색상을 출력하는지 확인합니다.

또 다른 방법은 --debug-brkmocha 의 명령 줄 옵션과 AttachVisual Studio Code 디버거 의 기본 시작 설정을 사용하는 것입니다.

제안 된 심층 설명 (André 제공)

이것을하기 위해:

다음 명령을 사용하여 명령 줄에서 mocha를 실행합니다.

mocha --debug-brk

이제 VS Code에서 디버그 아이콘을 클릭 한 Attach다음 시작 버튼 옆의 옵션에서 선택 합니다. VS Code에 중단 점을 추가 한 다음 시작을 클릭합니다.

OS X 10.10의 VSCode에서이 작업을 수행했습니다. ./settings/launch.json파일을 이것으로 바꾸십시오 .

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Run app.js",
            "type": "node",
            "program": "app.js", // Assuming this is your main app file.
            "stopOnEntry": false,
            "args": [],
            "cwd": ".",
            "runtimeExecutable": null,
            "env": { "NODE_ENV": "production"}
        },
        {
            "name": "Run mocha",
            "type": "node",
            "program": "/Users/myname/myfolder/node_modules/mocha/bin/_mocha",
            "stopOnEntry": false,
            "args": ["test/unit.js"],
            "cwd": ".",
            "runtimeExecutable": null,
            "env": { "NODE_ENV": "production"}
        }
    ]
}

여기 에서 요점으로도 사용할 수 있습니다 .

변경해야하는 키 값은 program이며 _mocha실행 파일 로 설정되어야 하며은 args테스트 파일의 배열이어야합니다.

Mac OS X에서 VS Code (1.8.2)에서 작업하는 방법은 다음과 같습니다.

{
    "name": "Mocha",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "stopOnEntry": false,
    "args": ["--recursive"], //you can specify paths to specific tests here
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": null,
    "env": {
        "NODE_ENV": "testing"
    }
}

Mocha는 npm 모듈 디렉토리에 설치해야합니다.

1. Debug > Add Configuration...메뉴로 이동
2. Node.js환경 선택
3. Mocha Tests표시된 드롭 다운 목록에서 옵션을 선택 합니다.
4. args속성 의 마지막 항목으로 테스트 파일의 경로를 입력합니다.
5. 을 추가하다 breakpoint
6. Debug아이콘을 클릭하십시오
7. Mocha Tests구성으로 선택
8. 보도 Start debugging버튼
9. :-)

나는 이것을 해결 방법으로 분류하는 방법을 알아 냈습니다 . Visual Studio Code 팀이 이에 대한보다 확실한 솔루션을 제공 할 것으로 기대하지만 그 동안 제가 한 일은 다음과 같습니다.

1. ./settings/mocha.js실행할 파일 목록으로 인수를 프로그래밍 방식으로 전달하는 mocha를 실행 하는 파일을 만들었습니다 . 여기 에서 전체 파일을 볼 수 있습니다 .

2. 나는를 실행 발사 설정 만든 ./settings/mocha.js으로 program우리가 인수로 시험에 필요한 파일 / 파일 패턴을 통과를 :

   {
       "name": "Unit tests",
       "type": "node",
       "program": ".settings/mocha.js",
       "stopOnEntry": true,
       "args": ["test/unit/*.js", "test/unit/**/*.js"],
       "cwd": ".",
       "runtimeExecutable": null,
       "env": { }
   }

   전체 launch.json 예제

따라서 이것은 수행하는 것과 동일 mocha test/unit/*.js test/unit/**/*.js하며 이제 mocha 테스트에서 중단 점을 사용할 수 있습니다.

args 목록 끝에 $ {file} 변수를 추가하면 열려있는 파일에서 직접 디버깅을 시작할 수 있습니다.

        {
            "type": "node",
            "request": "launch",
            "name": "Mocha Tests",
            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
            "args": [
                "-u",
                "tdd",
                "--timeout",
                "999999",
                "--colors",
                "${file}"
            ],
            "internalConsoleOptions": "openOnSessionStart"
        }

또 다른 답변을 추가하여 죄송하지만 VS Code 1.8.1 및 표준 노드 디버거에 포함 된 이전 답변 중 어느 것도 저에게 효과적이지 않았습니다. 여기에 내가 해결 한 방법이 있습니다 (이전 답변의 지침과 공식 VS Code Node.js 디버깅 문서의 지침으로 ) 한 번의 클릭 / 키 누르기 디버깅이 있습니다.

• mocha가 devDependencyin으로 설치되었는지 확인하십시오 packages.json."devDependencies": { "mocha": "^3.2", ... }
• mocha가 이제 설치되었는지 확인 npm install하려면 디렉토리에서 실행하십시오 package.json.node_modules/
• 열기 .vscode/launch.json(또는 VS Code에서 F1을 누르고 "launch"입력을 시작하고 "디버그 : open launch.json"선택)
• 오른쪽 하단에있는 파란색 "구성 추가"버튼을 클릭하거나 다른 하나를 복사하여 붙여 넣습니다. 이 단계는 선택 사항입니다. 기존 구성을 다시 사용할 수 있습니다. 그러나 혼란을 덜기 위해 하나를 추가하는 것이 좋습니다.
• 에서 다음을 변경 한 다음 launch.jsonVS Code의 디버그 창에서 새 구성 이름을 선택하고 녹색 화살표를 클릭하여 노드 + 모카 테스트 디버깅을 시작하십시오!

새 구성에서 launch.json:

"configurations": [{
    "name": "whatever name you want to show in the VS Code debug list",
    "type": "node",
    "cwd": "${workspaceRoot}",
    "program": "${workspaceRoot}/node_modules/mocha/bin/mocha",
    "args": ["--debug-brk=5858", "--no-timeouts", "--colors", "test/**/*.js"],
    "address": "localhost",
    "port": 5858,
    // the other default properties that are created for you are fine as-is
}, ...]

이것은 패턴 test/**/*.js이 테스트를 두는 곳에서 작동 한다고 가정합니다 . 적절하게 변경하십시오.

args및 port속성 모두 에서 일치 하도록 변경하는 한 자유롭게 포트를 변경하십시오 .

나를 위해 키 차이가 있는지 모카가 있었다 만들고 있었다 node_modules사용, program실행에 포인트로하고, args필요 debug-brk=x에 지정된 포트를 가리키는 port. 위의 나머지 부분은 일을 더 예쁘고 쉽게 만듭니다.

.vscode/launch.json저장소에 넣을지 여부는 귀하와 귀하의 팀에 달려 있습니다 . IDE 전용 파일이지만 모든 경로와 설치가 상대적이고 명시 적이므로 전체 팀이이 파일을 이렇게 사용할 수 있습니다.

팁 : 에는와 같이 mocha를 시작 package.json하는 scripts태그도 포함될 수 "test": "./node_modules/.bin/mocha"있지만 VS Code에서는 사용되지 않고 대신 npm test명령 줄에서 실행될 때 사용됩니다 . 이것은 나를 약간 혼란스럽게 만들었다. 다른 사람들도 혼란 스러울 경우를 대비하여 여기에 주목하십시오.

편집 : VS Code 1.9.0은 디버그 구성 드롭 다운에 "구성 추가"옵션을 추가했으며 위의 대부분을 단순화하는 데 도움이되는 "Node.js Mocha 테스트"를 선택할 수 있습니다. 여전히 mocha가 있는지 확인해야 하며 적절한 경로를 가리 키도록 and last (테스트를 찾는 패턴) node_modules를 업데이트해야 할 수도 있습니다 . 그러나이 두 가지 속성을 설정하면 거의 작동합니다.cwdruntimeArgs

launch.json에서 아래에 구성을 1 개 더 추가하십시오.

{
      "type": "node",
      "request": "launch",
      "name": "Mocha Tests",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "args": [
        "--timeout",
        "10000",
        "${workspaceRoot}/services/*.spec.js",
        "${workspaceRoot}/*.spec.js"
      ],
      "internalConsoleOptions": "openOnSessionStart"
    },

노드 버전을 구성해야하는 경우 다음 runtimeExecutable과 같은 필드 를 추가 하면됩니다.

{
      "type": "node",
      "request": "launch",
      "name": "Mocha Tests",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "args": [
        "--timeout",
        "10000",
        "${workspaceRoot}/services/*.spec.js",
        "${workspaceRoot}/*.spec.js"
      ],
      "internalConsoleOptions": "openOnSessionStart",
      "runtimeExecutable": "${env:HOME}/.nvm/versions/node/v8.2.1/bin/node"
    },

Windows를 사용하는 모든 사람을 위해. 모카를 전역 적으로 설치했다면 프로그램을 다음 경로로 설정하면 저에게 효과적이었습니다 (사용자 이름으로 바꾸십시오).

"program": "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\mocha\\bin\\_mocha"

이것은 Windows 7 컴퓨터에서 나를 위해 작동합니다. 모카를 전역 적으로 설치했지만이 구성은 사용자 프로필 경로가 필요하지 않도록 프로젝트 설치를 가리키고 있습니다 (btw, 성공하지 못한 상태에서 % USERPROFILE % 변수를 사용해 보았습니다). 이제 모카 테스트에서 중단 점을 설정할 수 있습니다. 예이!

{
        "name": "Mocha Tests",
        "type": "node",
        "request": "launch",
        "stopOnEntry": false,
        "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
        "cwd": "${workspaceRoot}",
        "args": ["./test/**/*.js"],
        "runtimeExecutable": null,
        "envFile": "${workspaceRoot}/.env"
    }

grunt 또는 gulp를 사용하는 사람들의 경우 구성이 매우 간단합니다.

Launch.json

{
"version": "0.2.0",
"configurations": [

    {
        "name": "Run mocha by grunt",
        "type": "node",
        "program": "${workspaceRoot}/node_modules/grunt/bin/grunt",
        "stopOnEntry": false,
        "args": ["mochaTest"],
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": null
    }
]}

Gruntfile.js

module.exports = function (grunt) {

grunt.initConfig({
    mochaTest: {
        test: {
            options: {
                reporter: 'spec'
            },
            src: ['test/**/*test.js']
        }
    }
});

grunt.loadNpmTasks('grunt-mocha-test');

grunt.registerTask('default', 'mochaTest');};

VSCode 버전 1.13.0 (macOS)에서는 구성->에 내장되어 있습니다 Mocha Tests.

Babel을 사용하거나 javascript 파일을 생성하면서 소스에 중단 점을 배치 sourceMaps할 때 outFiles. 다음은 나를 위해 일한 예제 구성입니다.

    {
        "name": "Mocha Test",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/packages/api/node_modules/mocha/bin/_mocha",
        "cwd": "${workspaceRoot}/packages/api",
        "args": ["--colors", "--no-timeouts", "out/test"],
        "outFiles": ["${workspaceRoot}/packages/api/out/*"],
        "sourceMaps": true,
    },

참고- outFiles중단 점을 추가하려는 모든 항목을 포함 하도록 수정해야 합니다. 이는 단일 저장소 및 여러 종속 프로젝트에서 더 지루할 수 있습니다.

1) 이동

.vscode

그때

launch.json

파일

2) launch.json에 다음 구성을 추가하십시오-

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Mocha Test",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/*folder_path_containing_test*/node_modules/.bin/mocha",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/*folder_path_containing_test*/node_modules/.bin/mocha.cmd"
            },
            "runtimeArgs": [
                "--colors",
                "--recursive",
                "${workspaceRoot}/*folder_path_till_test*/tests"
            ],
            "internalConsoleOptions": "openOnSessionStart"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/*folder_path_to_test*/app.js"
        }
    ]
}

3) 테스트 파일에 중단 점을 설정하고 F5

TypeScript를 사용할 때 Visual Studio Code 0.8.0 (tsc 1.5.3)에서 다음 구성이 작동합니다.

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "outDir": "build",
        "declaration": false
    },
    "files": [
        "./src/index.ts",
        "./src/test/appTests.ts"
    ]
}

여기서 주목해야 할 중요한 사항은 소스 맵이 생성되고 js의 출력 디렉토리가 다음으로 설정되어 있다는 것입니다. build

launch.json

    {
        "name": "Attach",
        "type": "node",
        // TCP/IP address. Default is "localhost".
        "address": "localhost",
        // Port to attach to.
        "port": 5858,
        "sourceMaps": true,
        "outDir": "build"
    }

참고 sourceMaps로 설정 true하고,이 것을 outDir에 설정되어build

디버그하기

1. index.ts가져온 다른 typescript 파일에 중단 점 고정
2. 터미널을 열고 다음을 실행하십시오. mocha --debug-brk ./build/test/appTests.js
3. VSC에서 'Attach'시작 구성을 실행합니다.

다음은 Mocha와 함께 작동하고 디버거 사용을 허용하는 Microsoft 의 시작 구성 (launch.json) 의 예입니다 .

또한 --debug-brk 옵션을 사용하는 방법에 대한 설명 이 있습니다.

마지막으로 VS Code의 tasks.json 파일과 Gulp 작업 실행기를 사용하여 Mocha 테스트로 코드를 디버깅하는 방법에 대한 대체 버전이 있습니다.

테스트에 약간의 종속성이있는 경우 쉽게 연결할 수 있습니다.

예를 들어, mongo-unit-helper데이터베이스와 통합 된 단위 테스트도 사용 하고 있습니다.

package.json 스크립트는 다음과 같습니다. mocha --recursive --require ./test/mongo-unit-helper.js --exit"

내 launch.json모습 :

  "configurations": [
  {
  "type": "node",
  "request": "launch",
  "name": "Mocha Tests",
  "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
  "args": [
    "-u",
    "tdd",
    "--timeout",
    "999999",
    "--colors",
    "--recursive",
    "--require",
    "${workspaceFolder}/test/mongo-unit-helper.js",
    "${workspaceFolder}/test/**/*.js",
  ],
  "internalConsoleOptions": "openOnSessionStart"
 }
]

솔루션 넣어하는 것입니다 --require에 별도로 args에서 launch.json.

가장 간단한 솔루션

.vscode 폴더 내의 launch.json에 다음 코드를 추가합니다.

{
            "name": "Unit tests",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
            "args": [
            ],
        }

그러나 시간 초과 인수도 추가 할 수 있습니다.

 {
            "name": "Unit tests",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
            "args": [
                "--timeout",
                "999999"
            ],
        }