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

Last updated at 2018-09-08Posted at 2018-09-08

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

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

完成イメージ

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

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

前提条件

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

カバレッジ計測ツールのnycやテストフレームワークのJestなどでカバレッジが計測できていること
CircleCIの設定がすでに完了していること

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

設定

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

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

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

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

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

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

CircleCIに環境変数を設定する

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

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

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

COVERALLS_REPO_TOKEN さきほどメモしたトークン値
COVERALLS_SERVICE_NAME ビルドに使用しているCIサービス名 (今回はcircle-ci)

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