mochaとVSCODEを使用したTypeScriptのブレークポイント

Question

vscodeは、mochaを起動してブレークポイントで停止しようとしています。私は手動でテストを実行すると、私は次のコマンドを使用します。

$ 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コードでブレークポイントを直接設定することはできません。

私の2番目の問題は、VSCode UIでデバッグを押して、デバッグモードで自動的にモアをトリガし、再度.tsファイル内のブレークポイントに直接ヒットすることです。

これは可能ですか？

Answer 1

ここVSCodeの最新のタスクの建物に基づいて私の設定です。ボックスの外でそれはTypescriptで動作しません！とにかく@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

重要な点は、mocha用に明示的に起動プロファイルを作成する必要があることです。これは私がどのように動作させるかの一例に過ぎません。 .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"} 
} 

これはlibディレクトリに*.test.jsファイルをテストするためのモカを起動します。

私は、次の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 Typescriptテストを行っています。 マイ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 
    }, 

ビルド：は'TSC -p tsconfig.test.json'を実行VSコードタスク、あるテストします。私は過去にgulp-typescriptソースマップ生成に関するいくつかの問題を抱えていました。そのため、私は現時点でTSCを使用しています。

My tsconfig.test。jsonは

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