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 でテストが実行される。