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

2019年11月17日 00時11分

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

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

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

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

環境構築

babel mocha インストール
<pre class="lang:default decode:true " title="ターミナルで">npm i --save-dev mocha babel-cli babel-preset-env

.babelrc

<pre class="lang:default decode:true " title=".babelrc">{ "presets": ["env"] }

ターミナルで動かす編

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

<pre class="lang:default decode:true " title="test/hoge.js">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 にコマンド追加

<pre class="lang:default decode:true " title="package.json"> "scripts": {

    "mocha" : "mocha"

  }

ターミナルで実行

<pre class="lang:default decode:true ">npm run mocha

通るのを確認。

<pre class="lang:default decode:true">> mocha

  Array

    #indexOf()

      √ should return -1 when the value is not present

  1 passing (7ms)

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

<pre class="lang:default decode:true ">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);
    });
  });
});

通らない。

<pre class="lang:default decode:true">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

<pre class="lang:default decode:true" title="launch.json">{
  "type": "node",
  "request": "launch",
  "name": "Mocha",
  "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
}

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

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">"args"</span><span style="font-weight: 400;">: [</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">"${workspaceFolder}/test"</span>

<span style="font-weight: 400;"> ]</span>

を追記。

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

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

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

プラグイン Mocha Sidebar を入れる

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

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

nyc を入れる。

<pre class="lang:default decode:true ">npm i --save-dev nyc

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

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

2019 11 17 19h47 31 通ったテストは行の左に緑色のマークがつく。

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