Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

今回はテストカバレッジの履歴の記録・閲覧ができる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

kentaro_m
金沢のゲーム会社で働くフロントエンドエンジニアです。プライベートではかゆいところに手が届くツールを開発してGitHubに公開しています。
https://kentarom.com/
dmmcom
総合エンタテイメントサイト「DMM.com」を運営。会員数は2,900万人を突破。動画配信、FX、英会話、ゲーム、太陽光発電、3Dプリンタなど40以上のサービスを展開。沖縄での水族館事業参入、ベルギーでのサッカークラブ経営など、様々な事業を手掛ける。また2018年より若手起業家の支援を強化、「DMM VENTURES」による出資や、M&Aなどを積極的に展開している。
https://dmm-corp.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした