Edited at

CircleCIとJest、CoverallsでJavaScriptアプリケーションのテストカバレッジを可視化する

こんにちは。突然ですが、テスト書いてますか。カバレッジは計測していますか?

今回はテストカバレッジの履歴の記録・閲覧ができるCoverallsというサービスを試したので、内容を共有したいと思います。


完成イメージ

本記事の説明どおりに設定を行うと、下記のようにCoveralls側でテストカバレッジを確認することが可能です。また、README.mdに貼るバッジも取得できます。

Screen_Shot_2018-09-08_at_17_17_06.png

さらに、ビルドやファイルごとのカバレッジの閲覧も可能となっています。

Screen Shot 2018-09-08 at 17.27.46.png


前提条件

すでにテストが書かれていて、カバレッジ計測ツールでカバレッジが取得できる環境がすでにあることを前提に話を進めていきます。


  • カバレッジ計測ツールのnycやテストフレームワークのJestなどでカバレッジが計測できていること

  • CircleCIの設定がすでに完了していること

今回はテストフレームワークのJestを使いますが、テストカバレッジの測定結果をlcov形式で出力できるツールであれば、他の環境でも応用が可能です。


設定


CoverallsとGitHubリポジトリの連携を行う

Coverallsのページに移動し、「GET STARTED FOR FREE」をクリックします。

Screen Shot 2018-09-08 at 18.21.45.png

GitHubでアカウント登録を行います。

Screen Shot 2018-09-08 at 18.23.46.png

ADD REPOSのページに移動し、連携させたいリポジトリを選択して、スイッチをオンにします。

スイッチをオンにすると、「DETAILS」ボタンが現れるので、クリックします。

Screen_Shot_2018-09-08_at_18_26_58.png

Coverallsにカバレッジを記録する際に使用するトークンがrepo_tokenに表示されるので、メモしておきます。

Screen_Shot_2018-09-08_at_18_28_25.png


CircleCIに環境変数を設定する

CircleCIの設定ページに移動し、環境変数を設定します。すでにCircleCIとGitHubリポジトリの連携が完了している場合は下記URLでアクセスが可能です

https://circleci.com/gh/<GitHubユーザー名>/<リポジトリ名>/edit#env-vars

トークン値とビルドに使用するCIサービス名を環境変数に登録します。



  • COVERALLS_REPO_TOKEN さきほどメモしたトークン値


  • COVERALLS_SERVICE_NAME ビルドに使用しているCIサービス名 (今回はcircle-ci)

Screen_Shot_2018-09-08_at_18_40_31.png


CoverallsパッケージのインストールとCircleCI設定ファイルを変更する

カバレッジをCoverallsに記録するために必要なパッケージをnpmからインストールします。

package.jsonが存在するディレクトリに移動してから、下記コマンドを実行してください。

$ npm install --save-dev coveralls

テストコマンドはlcovファイルが出力されるように変更します。Jestではコマンド実行時に--coverageオプションを与えることで、カバレッジがファイル出力されます。


テストコマンド

$ jest --coverage


実際にカバレッジをCoverallsに記録するときは下記のコマンドを実行します。package.jsonのnpm-scriptsに記載しても問題ないです。

行われている処理としては、カバレッジが記録されているファイルの内容を標準出力し、パイプラインでcoverallsコマンドに渡して、Coveralls側に送信されています。


カバレッジをCoverallsに送信するコマンド

# <lcovファイルまでのパス> | <coverallsコマンドの実行パス>

$ cat ./coverage/lcov.info | ./node_modules/.bin/coveralls

CircleCIの設定ファイルにコマンドを追加する場合は以下のように行います。


.circleci/config.yml

version: 2

jobs:
build:
working_directory: ~/workspace
docker:
- image: circleci/node:8.11.4
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: install packages
command: npm install
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- node_modules
# テストコマンドではlcovファイルを出力するようにする
- run:
name: run test
command: npm test
# カバレッジをCoverallsに記録
- run:
name: post coverage
command: cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
- run:
name: run lint
command: npm run lint

CircleCIの設定ファイルの準備が整ったら、リモートリポジトリにPushします。CircleCIがビルドを行い、カバレッジをCoverallsに送信します。

処理が成功すると、Coverallsを設定したリポジトリのページでカバレッジが確認できます。

Screen_Shot_2018-09-08_at_18_49_03.png


応用


README.mdに貼るバッジを取得する

Coverallsを設定したリポジトリのページに移動し、BADGEという項目の右上のEMBEDボタンをクリックすると、バッジを貼るためのコードをコピーできます。

事前に、BRANCHの設定がカバレッジを表示したいブランチであるかを確認しておきましょう。

Screen_Shot_2018-09-08_at_18_55_37.png


Pull Requestにカバレッジ計測結果をコメントする

Coverallsを設定したリポジトリページの左上のSettingsをクリックし、設定画面に移動します。

Screen_Shot_2018-09-08_at_18_49_03_08.png

LEAVE COMMENTSを有効にします。FORMATを変更することで、コメントするときの書式が変わります。

Screen_Shot_2018-09-08_at_19_07_51.png

実際に以下のようにPull Requestにコメントが追加されます。

Screen Shot 2018-09-08 at 19.09.41.png


Pull Request作成時に設定されたカバレッジのしきい値を確認して、CIをFailedにする

こちらはまだ試せていないのですが、設定されたカバレッジのしきい値を見て、CIをFailedにする機能があります。

機能追加時や修正時にテストが足りていないときに教えてくれます。さきほどのリポジトリの設定画面より、設定が可能です。

Screen_Shot_2018-09-08_at_19_15_57.png