karma で回しているテストから codecov に coverage レポートを上げるやり方

Karma から codecov に coverage を上げる方法です。

codecov とは

codecov とは online でコードカバレッジレポートをホストしてくれるサービスで、単純にレポートをオンラインで見れるだけでなく、pull request に対して、カバレッジの増減を自動的にコメントしてくれたり、現在のカバレッジステータスを埋め込みバッジで表示してくれたり ( たとえば など ) 、github の UI 上にカバレッジの状況をオーバーレイしてくれたりする (公式のブラウザ拡張あり) 、テストに対するモチベーションとか、テストのクオリティに対する意識をあげてくれるとても良いツールです。

オープンソースレポジトリは無料で無制限に利用可能。private レポジトリは月額$3 から、レポジトリ数に応じて課金。

カバレッジ専門の競合サービスでは coveralls.io などがあります。

(最近は ci サービスに coverage ホスティングが付属してるパターン (TeamCity, Scrutinizer) も増えてきているようです。)

設定

まず git init と npm init してください。

karma と coverage の設定

まずは依存をインストール

npm install --save-dev karma
npm install --save-dev karma-coverage
npm install --save-dev codecov

次に karma の config ファイルを作りましょう。

karma init

ブラウザ、test runner などは適用に好きなものを選びましょう。

karma.conf.js を手動で編集して、カバレッジレポートが出るように修正

  preprocessor: {
    'src/**/*.js': ['coverage']
  },

  reporters: ['progress', 'coverage'],

  coverageReporter: {
    reporters: [{type: 'lcov'}]
  }, 

以上の設定をした上で、

karma start karma.conf.js

すると、coverage/[Browser version]/lcov.info に coverage 情報が生成されます。( coverage/[Browser version]/lcov-report/index.html に html の coverage レポートが出ているので、ローカルでカバレッジを確認したい場合はこちらをブラウザで開きましょう。)

次に、package.json を編集して、coverage を送る script を登録。

{
  ...
  "scripts": {
    "test": "karma start karma.conf.js",
    "codecov": "codecov"
  }
  ...
}

( script の中の codecov コマンドは、上の npm install codecov でインストールされています。)

次に、circle.yml を編集して、テスト成功後に codecov にレポートを送信するように設定します。(この記事では ci サービスを circle ci と仮定しています。他の ci サービスを使う場合は適当に読み替えてください。)

test:
  post:
    - npm run codecov

以上の設定をした上で、circle ci 上で当該リポジトリの設定を on にした上で push すれば、circle 実行 -> テスト成功後 codecov レポートが生成 の順で、レポートが生成されるはずです。

• 以上の設定をしたサンプルレポジトリ
  • https://github.com/kt3k/codecov-karma-example

ブラウザ拡張

codecov レポートの出力が成功したレポジトリでブラウザエクステンション を入れて github 上でソースコードを閲覧すると下のように UI 上に coverage 情報がオーバーレイ表示されます。