web-dev-qa-db-ja.com

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

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

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

node.jsvisual-studio-codemochatdd
87
André Vermeulen

ご存知でしたか、起動設定に入るだけで、他の設定の後または間にカーソルを置き、を押します ctrl-space 自動生成された最新の有効なmocha configを取得するには？

それは私にとって完璧に動作します。ブレークポイントでの停止を含む。 （私は以前の、今では時代遅れのものも持っていましたが、それはさまざまな設定関連の理由でもういませんでした。）

enter image description here

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-brkdeprectated （少なくともNode> =バージョン8を持つ人）。

71
Frank Nocke

--debug-brk + Attachを使用したくない、またはグローバルmochaインストールへの絶対パスを指定したくない場合（launch.jsonをバージョン管理下に置き、異なるマシンに複数の開発者がいる場合はブレーキがかかります）、mochaをインストールしますdev依存関係として、これを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が色を出力するようにします。

67
felixfbecker

別の方法は、mochaの--debug-brkコマンドラインオプションと、Visual Studio CodeデバッガーのデフォルトのAttach起動設定を使用することです。

より深い説明の提案（Andréから）

これをする：

次のコマンドを使用して、コマンドラインからmochaを実行します。

mocha --debug-brk

VS Codeで[デバッグ]アイコンをクリックし、[開始]ボタンの横にあるオプションから[Attach]を選択します。 VS Codeにブレークポイントを追加し、[開始]をクリックします。

42
Wolfgang Kluge

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"}
        }
    ]
}

Gist here としても利用可能です。

変更する必要があるキーの値は、program（_mocha実行可能ファイルに設定する必要があります）とargs（テストファイルの配列にする必要があります）です。

23
GPX

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 modulesディレクトリにインストールする必要があります。

10
mikebz
  1. Debug > Add Configuration...メニューに移動します
  2. Node.js環境を選択します
  3. 表示されるドロップダウンリストからMocha Testsオプションを選択します
  4. argsプロパティの最後の項目としてテストファイルのパスを入力します
  5. breakpointを追加します
  6. Debugアイコンをクリックします
  7. 構成としてMocha Testsを選択します
  8. Start debuggingボタンを押します
  9. :-)
7
Yas

回避策として分類するこれを行う方法を見つけました。私は、Visual Studio Codeチームがこれに対してより確実なソリューションを提供することを期待していますが、その間、私がやったことは：

  1. 実行するファイルのリストとして引数を引数としてmochaを実行する./settings/mocha.jsファイルを作成しました。完全なファイルを見ることができます here ;

  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を実行することと同等であり、モカテストでブレークポイントを使用できるようになりました。

6
Dário

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"
        }
3
Eugene Kulabuhov

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"
    },
2
Alongkorn Chetasumon

さらに別の答えを追加してすみませんが、VS Code 1.8.1およびそれに含まれる標準のNodeデバッガの時点で、以前のものはまったく機能しませんでした。ここに私がそれを解決した方法があります（以前の回答からのガイダンスと公式の VS Code Node.jsデバッグ docsから）ので、ワンクリック/キープレスのデバッグがあります：

  • Mochaがpackages.jsonのdevDependencyとしてインストールされていることを確認します："devDependencies": { "mocha": "^3.2", ... }
  • npm installのディレクトリでpackage.jsonを実行して、node_modules/にmochaがインストールされていることを確認します
  • .vscode/launch.jsonを開きます（またはVS CodeでF1を押し、「launch」と入力し始め、「Debug：Open launch.json」を選択します）
  • 右下の青い[構成の追加]ボタンをクリックします（または、他の1つをコピーして貼り付けます）。この手順はオプションです...つまり、既存の構成を再利用できます。ただし、混乱を避けるために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プロパティの両方でポートを変更する限り、ポートを自由に変更できます。

私にとっての主な違いは、mochaがnode_modulesにあることを確認し、programを使用して実行可能ファイルをポイントし、argsがdebug-brk=xを使用してport。上記の残りの部分は、物事をより美しく簡単にするだけです。

.vscode/launch.jsonをリポジトリに置くかどうかは、あなたとあなたのチーム次第です。これはIDE専用のファイルですが、すべてのパスとインストールは相対的で明示的であるため、チーム全体で問題なく使用できます。

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

編集：VS Code 1.9.0では、デバッグ構成のドロップダウンに「構成の追加」オプションが追加され、上記のほとんどを簡素化するのに役立つ「Node.js Mocha Tests」を選択できます。 mochaがnode_modulesにあることを確認し、cwdと最後のruntimeArgs（テストを見つけるためのパターン）を更新して適切なパスを指すようにする必要があります。ただし、これらの2つのプロパティを設定すると、そこからほとんど機能するはずです。

2
Jon Adams

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
ubershmekel

これは、Windows 7マシンで動作します。私はmochaをグローバルにインストールしていますが、この構成はプロジェクトのインストールを指しており、ユーザープロファイルパスの必要性を回避しています（ところで、％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"
    }
1
rspring1975

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');};
1
Leandro Rodrigues

VSCodeバージョン1.13.0（macOS）では、構成-> Mocha Testsに組み込まれています。

1
Obsidian

Windowsを使用している人向け。 mochaをグローバルにインストールした場合、プログラムを次のパスに設定するとうまくいきました（ユーザー名を交換してください）。

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

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'起動構成を実行します
0
Bruno Grieder

テストに依存関係がある場合は、簡単に添付することもできます。

たとえば、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を個別に配置することです。

0
airen

以下は、Microsoftの launch configuration（launch.json） の例です。Mochaで動作し、デバッガーを使用できます。

また、--debug-brkオプションの使用方法の 説明 があります。

最後に、 Mochaテストでコードをデバッグする方法の代替バージョン VS CodeおよびGulpタスクランナーのtasks.jsonファイルを使用します。

0
javaeeeee

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を押します

0
MERLIN THOMAS