JavaScript
ATOM
nyc

ソースコードに変更があるたびに行単位のカバレッジをエディターに反映する


はじめに

カバレッジの情報をリアルタイムでエディターに反映できるようにしたときのメモ。


筆者の環境


  • yarn

  • node.js 8.10

  • nyc1

  • atom


テスト実行時にカバレッジを出力する


nyc をインストール

yarn add nyc --dev


package.json に yarn test 実行時の script を書く


package.json

  "scripts": {

"test": "nyc -r lcovonly -r text mocha --recursive test/unit/**/"
},


テスト実行


テスト実行

yarn test


coverage/ 配下にカバレッジが出力されるようになる。

λ tree coverage

coverage/
└── lcov.info

ターミナルの表示:

スクリーンショット 2019-02-11 18.54.01.png


ソースコードに変更があるたびにテストコードを実行する

onchange2 をインストール

yarn add onchange --dev

これで、コードの変更を監視して、変更があるたびにテストを実行するようになる。

onchange lib/**/*.js test/unit/**/*.js -- yarn test

せっかくなのでyarn のscriptに登録する。


package.json

  "scripts": {

"test": "nyc -r lcovonly -r text mocha --recursive test/unit/**/",
"watch": "onchange lib/**/*.js test/unit/**/*.js -- yarn test"
},


カバレッジの情報をリアルタイムにエディタに反映する

Atom の拡張に Coverage Merkers3 というのがあった。

ネイティブ拡張なので再ビルドの必要があるが、何かの拡張 package が node-gyp を使っているらしく、 Python 3.x 系だとビルドに失敗する。仕方ないので python 2.7 に切り替えてインストールする。

pyenv locla 2.7.15

apm install coverage-markers
apm rebuild

Mac の場合、 Opt + Ctrl + O で行単位のカバレッジの表示/非表示をトグルできる。。

Atom エディタの画面:

スクリーンショット 2019-02-11 13.24.13.png

テストコードがカバーされていない行の左側に赤い丸印がつく。


参考