概要

• テストのコードカバレッジのレポートにCodeCovを使いバッジをゲットするまでのハンズオンメモです

開発環境と構成

• 開発環境

• 構成
  全体としてはざっくり以下のような構成となります

CodeCovのサインアップとプロジェクト設定

1. codecovを開く

まず、CodeCovのサインアップから。

2.プロジェクトはGithubにホストしているのでGithubを選択

3.Githubへのアクセス認可の画面がでるので、Authorize CodeDevをクリック

4.CodeCovの初期画面がでる。

リポジトリがまだ登録されていないのでAdd Repositoryをクリック。

5.Choose a new repository belowという画面がでてレポジトリ一覧が表示される。

「ここで一覧から対象のリポジトリを選択すれば良し」と思ったら、、、すべてのリポジトリが表示されていない模様

6.直接リポジトリを指定する

↑のようなメッセージがでていたので、直接指定することにする。

https://github.com/riversun/event-listener-helperというリポジトリを設定したかったので、上のフォーマットにならい、https://codecov.io/gh/riversun/event-listener-helperにアクセスしたら、そのプロジェクトの初期画面が表示される。

7.CodeCovのトークンをメモする

初期画面に表示されているトークンをメモしておく。
あとでCircleCIの環境変数に登録する。

環境変数名はCODECOV_TOKENとなる。

CircleCI用のconfig.ymlにCodeCov関係の設定を追記する

CodeCov用のOrbがあるので、その利用を前提としてconfig.ymlを編集する

ちなみに、Orbsとは

Orbs とは
CircleCI Orbs は、ジョブ、コマンド、Executor のような設定要素をまとめた共有可能なパッケージです。 CircleCI 独自の認証済み Orbs のほか、パートナー企業によるサードパーティ製 Orbs を用意しています。

（出典：https://circleci.com/docs/ja/2.0/orb-intro/）

config.ymlを以下のようにした

version: 2.1
orbs:
  node: circleci/[email protected]
  codecov: codecov/[email protected]
jobs:
  build-and-test:
    executor:
      name: node/default
    steps:
      - checkout
      - node/with-cache:
          steps:
            - run: npm install
            - run: npm test
            - codecov/upload:
                file: ./coverage/lcov.info
workflows:
  build-and-test:
    jobs:
      - build-and-test

ポイント

• orbsにcodecov: codecov/[email protected]を追加する

• カバレッジレポートファイルのアップロードをするためのコマンドcodecov/uploadを以下のように追記する。

- codecov/upload:
    file: ./coverage/lcov.info

• 実際なにやってるか
  • codecov/uploadの内部処理ではcurlコマンドでカバレッジレポートファイルlcov.infoをCircleCI(docker)→CodeCovに送信している
  • lcov.info(カバレッジレポートが格納されたファイル)は[root]/coverage/lcov.infoに生成される前提。そのように生成されるようにJestの設定(jest.config.js)を次でする。

Jestの設定

念のためにJestの設定をみておく。

やりたいことは以下の２点

• Jestでテストするときにコードカバレッジも計測するようにすること
• コードカバレッジのレポートが目的の場所に生成されるようにすること

ということでjest.config.jsの設定をまるっと掲載すると以下のようになる

module.exports = {
  verbose: true,
  testEnvironment: 'jsdom',
  testMatch: [
    "**/test/**/*.test.js"
  ],
  testTimeout: 5000,
  moduleDirectories: [
    "node_modules"
  ],
  transformIgnorePatterns: [
    "node_modules/(?!(@riversun/event-emitter)/)"
  ],
  "coverageDirectory": "./coverage/",
  "collectCoverage": true
};

本稿で重要なところは以下の部分

 "coverageDirectory": "./coverage/",
  "collectCoverage": true

coverageDirectoryでカバレッジ計測レポートの関連ファイルの生成先を指定する
collectCoverage:trueでテストする毎にカバレッジ計測レポートが生成されるようになる
(jestコマンドに --coverageオプションをつけて、必要なときに生成するアプローチでもアリ)

CircleCIでプロジェクトをセットアップする

さてここからCircleCIでプロジェクトのセットアップをしていく。

1.　https://circleci.com/ を開いてGo to Appクリック(CircleCI自体のサインアップは割愛)

2.サードパーティ製のOrbsをつかえるようにする

さきほど、CodeCovのOrbを使う記述をconfig.ymlに記述したが、サードパーティ製のOrbsを使うための設定を１度だけやっておく必要がある。

画面左の歯車アイコンをクリックすると、

Organization Settingsという画面がでるので、Allow uncertified orbsをYesにすることで、サードパーティ製Orbsの使用を許可できる。

この設定はプロジェクト横断設定なので１度だけやればOK。

3.プロジェクトを追加する

さて、サードパーティ製のOrbsの許可までできたので、ここでCIしたいプロジェクトを登録する。

以下の画面で、Add projectをクリック

↑の画面じゃなくて、↓の画面の場合もある（↑のほうは新UIのプレビュー版で↓は現行UIという位置づけかな？いずれにせよAdd projectをクリックする。)

自分のプロジェクト一覧からCircleCIしたいプロジェクトのところにあるSet Up Projectをクリック

3.CircleCI用のConfigを追加する

ここでは、CircleCIが「自動でConfig作りましょうか？」とたずねてくれるが、自前のconfig.ymlを作ってPushしてあるので、Add Manuallyをクリック。

4.さっそくビルド

既に「circleci/config.ymlがあるならビルド開始できますよ」というメッセージが出るのでStart Buildingをクリックする。

5.予定通りビルド失敗

そして、CircleCI上にて、ビルドが失敗する。

CodeCovの環境変数を設定していないので最初のビルドは失敗した。

6.CodeCov用の環境変数を設定する

さきほどメモしたCodeCovの環境変数を、CircleCIにセットする。

現行UIでは以下のようにプロジェクト名の右にある歯車アイコンをクリックする

Environment Variablesを選択して、Add variableをクリック

ここで環境変数をセットできるので、環境変数名としてNameにCODECOV_TOKENをセット、ValueにはさきほどCodeCovから取得した値をセットしてAdd Variable*をクリック

無事に環境変数をセットできた模様

ちなみに、
CircleCIの新UI（プレビュー版）のほうだと、同様の操作は以下のようになる。

対象のプロジェクトのPipelines画面で、Project Settingsをクリック

Environemnt Variablesを選択して、Add Variablesをクリックする

（あ、なるほど。UIレイアウト、デザインは違うけどラベルが一緒なので文字だけのドキュメンテーションにしたら同じ説明で済むようにできてますね）

CircleCIでビルドして、カバレッジレポートをCodeCovでみる

1.CircleCIでビルドする

ここまでで、CircleCIでビルドする準備ができたので、あとはコミット・プッシュするなり、ReRunするなりしてCircleCIを回すだけ。

以下のようにビルドが無事成功した模様。

2.CodeCovでカバレッジレポートを確認する

CodeCovを開き https://codecov.io/gh
さきほど登録したプロジェクトをクリック

カバレッジレポートが表示された

Readme.mdにカバレッジ計測バッジをはりつける

CodeCovのプロジェクト画面でSettingsタブでBadgeを選択すると、以下のようにバッジ用のコードがあるので、GithubのReadmeにバッジをつけたいときはMarkdownの内容をコピーして、それをReadme.mdにペーストすればできあがり。

ReadmeにCodeCovのバッジが無事表示された
（本プロジェクトはこちら)

まとめ

• 以下のようなJest,CircleCI,CodeCovの組み合わせの導入手順をご紹介しました

• 便利でMotivationalなクラウドサービス群に感謝感謝！