VSCode上でJavaScriptのユニットテスト

EclipseについてるJUnitを使っているとやっぱり、エディタ上でユニットテストできた方が生産的だったので、主に使っているJavaScriptでできないかなー使って調べてみた。

MochaSideBarまで入れると一括実行や一覧表示までカバーしてくれるのでエディタ上で完結していい感じになった。

 

JavaScriptもJsUnitがあったり、Jasmineがあったりする中で、ブログにも書いたMochaを触っていければと思う。

スター数、勢いもあるのでとりあえず安心はしている。

環境構築

babel mochaインストール
npm i --save-dev mocha babel-cli babel-preset-env

 

.babelrc

{ "presets": ["env"] }

 

 

ターミナルで動かす編

 

test配下にテストコード作成

var assert = require('assert');

describe('Array', function() {

  describe('#indexOf()', function() {

    it('should return -1 when the value is not present', function() {

      assert.equal([1, 2, 3].indexOf(4), -1);

    });

  });

});

 

 

mochaのチュートリアルにある内容

package.jsonにコマンド追加

 "scripts": {

    "mocha" : "mocha"

  }

 

ターミナルで実行

 

npm run mocha

 

 

通るのを確認。

> mocha

  Array

    #indexOf()

      √ should return -1 when the value is not present

  1 passing (7ms)

 

 

 

 

テストが通らないよう変更

var assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      //テストが通らないように変更
        assert.equal([1, 2, 3].indexOf(3), -1);
      //assert.equal([1, 2, 3].indexOf(4), -1);
    });
  });
});

 

通らない。

Array
    #indexOf()
      1) should return -1 when the value is not present
  0 passing (8ms)
  1 failing
  1) Array
       #indexOf()
         should return -1 when the value is not present:
      AssertionError [ERR_ASSERTION]: 2 == -1
      + expected - actual
      -2
      +-1
      at Context.<anonymous> (test\hoge.js:5:14)

 

VSCodeのデバッグタブから動かす

 

起動設定 launch.json

{
  "type": "node",
  "request": "launch",
  "name": "Mocha",
  "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
}

 



デフォルトではtest配下を実行するので必要があれば、

 

            "args": [

                "${workspaceFolder}/test"

            ]

を追記。

 

テストマークを選択し、デバッグの構成にMochaを選択。



実行▶を押すと、実行される。

デバッグコンソールに結果が表示される。

 

プラグインMocha Sidebarを入れる

 

コード上にデバッグとテスト実行ボタンが表示される機能。

指定されたディレクトリ配下にあるテストコード一括実行、結果を一覧化できる割とよさそうなツールでした。

 

nycを入れる。

npm i --save-dev nyc

 

Mocha SidebarのVSCodeマーケットプレイスより。

インストール後先ほどのtest/hoge.jsを開くと、Run Suite、Debug Suite等の文字が表示されている。Run SuiteやRun itemでテストが実行される。

通ったテストは行の左に緑色のマークがつく。

テスト一覧も表記されたり視認性はよさそうだけど、大量のテスト実行時の時はやっぱりまとめるツールが必要そう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする