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

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

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

 

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

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

環境構築

babel mochaインストール

 

.babelrc

 

 

ターミナルで動かす編

 

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

 

 

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

package.jsonにコマンド追加

 

ターミナルで実行

 

 

 

通るのを確認。

 

 

 

 

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

 

通らない。

 

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

 

起動設定 launch.json

 



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

 

            "args": [

                "${workspaceFolder}/test"

            ]

を追記。

 

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



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

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

 

プラグインMocha Sidebarを入れる

 

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

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

 

nycを入れる。

 

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

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

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

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