Visual Studio Codeを使用したモカブレークポイント

Visual Studio Codeを使用してMochaテストにブレークポイントを追加することは可能ですか？

通常、コードをデバッグするときは、launch.jsonを構成する必要があり、プログラム属性を実行するJavaScriptファイルに設定します。モカのためにこれを行う方法はわかりません。

起動設定に移動し、他の設定の後ろまたは間にカーソルを置いて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 余談ですが：廃止されました（少なくともNode> =バージョン8のユーザーの場合）。

--debug-brk+ Attach を使用したくない場合、またはグローバルmochaインストールへの絶対パスを指定したくない場合（これは、launch.jsonをバージョン管理下に置き、複数の開発者が異なるマシン上にいるとブレーキがかかります）、dev依存関係として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ブレークポイントで停止したためにテストがタイムアウトしないことを確認し、--colorsVS Codeが色をサポートしていることを検出しなくても、Mochaが色を出力することを確認します。

もう1つの方法は--debug-brk、mochaのコマンドラインオプションと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プログラムで引数を実行するファイルのリストとして渡してモカを実行するファイルを作成しました。ここでファイル全体を見ることができます。

2. ./settings/mocha.jsas を実行し、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と同等であり、モカテストでブレークポイントを使用できます。

引数リストの最後に$ {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およびそれに含まれている標準のNodeデバッガの時点では、以前の回答はどれもうまく機能しませんでした。ここに私がそれを解決する方法があります（ここでの以前の回答と公式のVS Code Node.js Debugging docs からのガイダンス付き）、クリック/キープレスデバッグが1つあります：

• mochaがとしてインストールされていることを確認devDependencyしpackages.jsonます。"devDependencies": { "mocha": "^3.2", ... }
• npm installのディレクトリで実行して、package.jsonmochaがインストールされていることを確認しますnode_modules/
• 開く.vscode/launch.json（またはVSコードでF1を押し、「launch」と入力し始め、「Debug：Open launch.json」を選択します）
• 右下の青い[設定を追加]ボタンをクリックします（または、他のいずれかをコピーして貼り付けます）。この手順はオプションです...つまり、既存の構成を再利用できます。しかし、混乱を少なくするために1つ追加することをお勧めします。
• で以下を変更してlaunch.jsonから、VS 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専用のファイルですが、すべてのパスとインストールが相対的で明示的であるため、チーム全体でこのように使用できます。問題はありません。

ヒント：にpackage.jsonは、のscriptsようなものでmochaを起動するタグを含めることもできますが、"test": "./node_modules/.bin/mocha"VS Codeでは使用されません。代わりにnpm test、コマンドラインで実行されたときに使用されます。これは私を少し混乱させました。他の人も混乱する場合に備えて、ここで注意してください。

編集：VS Code 1.9.0は​​、デバッグ構成ドロップダウンに「構成の追加」オプションを追加しました。上記のほとんどを簡素化するのに役立つ「Node.js Mochaテスト」を選択できます。あなたはまだモカがあなたの中にあることを確認する必要があり、適切なパスを指すようにそして最後node_modulesを更新する必要があります（これはテストを見つけるためのパターンです）。しかし、これらの2つのプロパティを設定すると、そこからほとんど機能するようになります。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マシンで動作しています。私はモカをグローバルにインストールしていますが、この構成はユーザープロファイルパスの必要性を回避するためにプロジェクトのインストールを指します（ところで、％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ブレークポイントを追加する可能性のあるすべてのものを含めるように変更する必要があります。これは、monorepoおよび複数の依存プロジェクトの場合、より退屈なものになる可能性があります。

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から、「アタッチ」起動構成を実行します

以下は、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"
            ],
        }