概要

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

開発環境と構成

開発環境

開発言語	JavaScript(ES6)/Node.js
テストフレームワーク	Jest
Gitホスティング	GitHub
CIツール	CircleCI
カバレッジレポート	CodeCov

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

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

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/node@1.1.6
  codecov: codecov/codecov@1.0.5
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/codecov@1.0.5を追加する
カバレッジレポートファイルのアップロードをするためのコマンドcodecov/uploadを以下のように追記する。

config.yml(抜粋)

- 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の設定をまるっと掲載すると以下のようになる

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
};

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

jest.config.js(抜粋)

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

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