Точки останова в TypeScript с моккой и VSCODE

Question

Я пытаюсь получить vscode, чтобы запустить мокко и остановиться на контрольных точках. Когда я запускать тесты вручную я использую следующую команду:

$ mocha -r node_modules/reflect-metadata/Reflect.js --recursive 

Я также можно использовать следующую команду:

mocha -r node_modules/reflect-metadata/Reflect.js --recursive --debug-brk 

И следующий отладки конфигурации:

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "Attach to Process", 
      "type": "node", 
      "request": "attach", 
      "processId": "${command.PickProcess}", 
      "port": 5858, 
      "sourceMaps": true, 
      "outFiles": [ 
       "src/**/**.js", 
       "test/**/**.test.js" 
      ] 
     } 
    ] 
} 

Это позволяет мне установить точки останова в файлах .js и посмотреть исходный источник TypeScript. Но я не могу установить точку разрыва непосредственно в коде TypeScript.

Моя вторая проблема заключается в том, что я хотел бы просто нажать debug в пользовательском интерфейсе VSCode и запустить mocha в режиме отладки автоматически и снова попасть в контрольные точки непосредственно в файлах .ts.

Возможно ли это?

Answer 1

Вот мой конфиг на основе последнего здания задачи в VSCode. Из коробки он не работает с TypScript !? В любом случае, комбинируя ответ от @Jason Dent, я смог заставить его работать! Он также использует новый отладчик node2. Для вашей настройки измените конструкцию/тест на то место, где вы разместили свои файлы.

{ 
    "type": "node2", 
    "request": "launch", 
    // Automatically stop program after launch. 
    "stopOnEntry": false, 
    "name": "Mocha Tests", 
    "cwd": "${workspaceRoot}", 
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha", 
    "windows": { 
     "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha.cmd" 
    }, 
    "runtimeArgs": [ 
     "-u", 
     "tdd", 
     "--timeout", 
     "999999", 
     "--colors", 
     "--recursive", 
     "${workspaceRoot}/build/test" 
    ], 
    "sourceMaps": true, 
    "outFiles": ["${workspaceRoot}/build"], 
    "internalConsoleOptions": "openOnSessionStart", 

    // Prevents debugger from stepping into this code :) 
    "skipFiles": [ 
     "node_modules/**/*.js", 
     "<node_internals>/**/*.js" 
    ] 
}, 

Answer 2

Надеюсь, вы разобрались в этом.

Основной ответ: да, вы можете установить контрольные точки в файлах .ts и отладить их с помощью VSCode. Они прогуливаются здесь по общей отладке: Debugging with VSCode

Ключевой момент состоит в том, что вы должны сделать профиль запуска явно для мокко. Это всего лишь пример того, как я получил его на работу. Вам нужно будет добавить что-то вроде следующего к вашему .vscode/launch.json.

{ 
    // Name of configuration; appears in the launch configuration drop down menu. 
    "name": "Run mocha", 
    // Type of configuration. Possible values: "node", "mono". 
    "type": "node", 
    // Request type "launch" or "attach" 
    "request": "launch", 
    // Workspace relative or absolute path to the program. 
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", 
    // Automatically stop program after launch. 
    "stopOnEntry": false, 
    // Command line arguments passed to the program (mocha in this case). 
    "args": ["--recursive", "lib/*.test.js"], 
    // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace. 
    "cwd": "${workspaceRoot}", 
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH. 
    "runtimeExecutable": null, 
    "outDir": "${workspaceRoot}/lib", 
    "sourceMaps": true, 
    // Environment variables passed to the program. 
    "env": { "NODE_ENV": "test"} 
} 

Это запустит мокко, чтобы проверить *.test.js файлы в каталоге LIB.

Я использовал следующий tsconfig.json файл и мои модульные тесты рядом с кодом:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "declaration": true, 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "outDir": "./lib", 
    "sourceMap": true, 
    "removeComments": true 
    }, 
    "include": [ 
    "src/**/*" 
    ], 
    "exclude": [ 
    "node_modules", 
    "data", 
    "lib" 
    ] 
} 

Answer 3

У меня была очень похожая установка, такая как @JasonDent, но это не сработало. Настройка node2 уже устарела (vscode предупредит вас). Вместо этого просто добавьте "protocol": "inspector" и вуаля точки останова попали в настоящее время:

{ 
     "name": "Mocha", 
     "type": "node", 
     "protocol": "inspector", 
     "request": "launch", 
     "cwd": "${workspaceRoot}", 
     "preLaunchTask": "tsc", 
     "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", 
     "args": [ "--no-timeouts", "--colors", "${workspaceRoot}/out/test/**/*.js" ], 
     "stopOnEntry": false, 
     "runtimeExecutable": null, 
     "env": { 
      "NODE_ENV": "testing" 
     }, 
     "sourceMaps": true 
    }, 

Answer 4

Я также рекомендую отдельный профиль запуска для отладки тестов мокко. У меня есть следующие конфигурации, работающие с тестом Mocha Typcript. Мой launch.json отладки профиль мокко выглядит следующим образом:

{ 
     "type": "node", 
     "request": "launch", 
     "name": "Debug tests", 
     "runtimeExecutable": "mocha", 
     "windows": { 
      "runtimeExecutable": "mocha.cmd" 
     }, 
     "preLaunchTask": "build:tests", 
     "runtimeArgs": [ 
      "--debug-brk", 
      "-p", 
      "tsconfig.test.json", 
      "test-js/test/index.js" 
     ], 
     "program": "${workspaceRoot}\\test\\index.ts", 
     "outFiles": [ 
      "${workspaceRoot}\\test-js\\**\\*.js" 
     ], 
     "port": 5858 
    }, 

сборки: тесты это против кода задачи, которая работает «ТСК -p tsconfig.test.json». У меня были некоторые проблемы в прошлом с генерацией sourcemap gulp-typescript, поэтому я использую TSC на данный момент.

Мой tsconfig.test.json is:

{ 
"compilerOptions": { 
    "outDir": "./test-js", 
    "module": "commonjs", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "target": "es2016", 
    "declaration": true, 
    "sourceMap": true, 
    "inlineSources": true 
}, 
"files": [ 
    "./test/index.ts" 
] 
}