Visual Studio Code で jasmine の spec を デバッグ実行する 方法

2017年5月11日 18:56 , , 0 件のコメント

Visual Studio Code で Node.js アプリの単体テストを jasmine を使って作成していて、 どこでエラーになっているか分かりづらかったのでバグ取りするのにデバッグ実行できる方法を調べたのでここにまとめておきます。

目次

開発環境 の 準備

Node.js で jasmine を使う場合、 jasmine というパッケージを global インストールして使いますが、 Visual Studio Code と組み合わせて使うときは jasmine-node を使った方が簡単に扱えます。 デバッグ実行できるようにするためには プロジェクトローカル へ jasmine-node のインストールを行います。 以下ではその具体的な手順および設定を記載します。

  1. jasmine-node を追加。

    ?
    1
    npm install jasmine-node --save-dev

  2. launch.json を追加。

    1. ビューバーの「デバッグ」を選択

    2. 「歯車」アイコンを選択

  3. launch.json に jasmine 起動コマンド を追加。

    /.vscode/launch.json

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "node",
          "request": "launch",
          "name": "jasmine-node debugging",
          "program": "${workspaceRoot}/node_modules/jasmine-node/lib/jasmine-node/cli.js",
          "args": [
            "./spec",
            "--color"
          ],
          "cwd": "${workspaceRoot}"
        }
      ]
    }

    "program"
    プロジェクトローカルにある jasmine-node の cli.js を呼び出せるよう設定しています。

    "args"
    テストケースファイル ***spec.js が保存されているパスを プロジェクトルート からの相対パスで指定しています。 テストケースを保存するパスを test にするのであればこの値を ./test に修正します。

以上で環境準備は完了です。 F5 でデバッグ実行すれば jasmine のデバッグ実行 が可能です。

実装, テスト の準備

ここでは上で準備した環境に対して実際のソースコードおよびテストコードを作成していきます。

ディレクトリ構成

?
1
2
3
4
5
6
7
8
9
%PROJECT_ROOT%
│ 
│  package.json
│ 
├─source
│      index.js
│     
└─spec
        index.spec.js

ソースコード

今回は長方形の面積を求めるモジュールを作成します。

./souce/index.js

?
1
2
3
module.exports = function (a, b) {
  return a * b;
};

テストコード

Node.js において require は実行している JavaScriptファイル からの相対パスを指定するので、ここでは "../source/index.js" を指定してテストしたいモジュールを呼び出しています。

./spec/index.spec.js

?
1
2
3
4
5
6
7
var square = require("../source/index.js");
 
describe("A 'square' module", function () {
  it("calculates the area of a 2 x 3 rectangle to be 6", function () {
    expect(square(2, 3)).toBe(6);
  });
});

デバッグ実行

ブレークポイントを指定した後、通常のデバッグ実行と同じように F5 でデバッグできます。 きちんんと jasmine の spec 中で中断されているのが分かります。

今回の記事は参考になったでしょうか？ Visual Studio Code において jasmine の デバッグ実行 を行うポイントは以下の2点になります。

  • jasmine-node をローカルインストールして利用する
  • デバッグ起動する設定は ./vscode/launch.json に記述する

参考記事

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！