概要

テストのコードカバレッジのレポートに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.1orbs:node:circleci/node@1.1.6codecov:codecov/codecov@1.0.5jobs:build-and-test:executor:name:node/defaultsteps:-checkout-node/with-cache:steps:-run:npm install-run:npm test-codecov/upload:file:./coverage/lcov.infoworkflows: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オプションをつけて、必要なときに生成するアプローチでもアリ)