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

はじめに

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

筆者の環境

• yarn
• node.js 8.10
• nyc¹
• 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

ターミナルの表示:

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

onchange² をインストール

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 Merkers³ というのがあった。
ネイティブ拡張なので再ビルドの必要があるが、何かの拡張 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 エディタの画面:

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

参考

1. https://github.com/istanbuljs/nyc ↩

2. https://github.com/Qard/onchange ↩

3. https://atom.io/packages/coverage-markers ↩