Jest+CircleCIなプロジェクトにCodeCov(カバレッジレポート)を導入するまでの手順ハンズオン

# 概要
- テストのコードカバレッジのレポートに**CodeCov**を使いバッジ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/cb59a150-2e71-e4c6-fae9-7705808cf3cb.png)をゲットするまでのハンズオンメモです

## 開発環境と構成

- 開発環境

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/932727f0-7a8b-cd6a-32f4-ee605349db5d.png)


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

1. [codecov](https://codecov.io/)を開く

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/b786044f-0adc-3197-29fe-24942b82753c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/587bf102-3be9-694e-94aa-2b745ab9a0ae.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/26a8ce6f-a802-a30a-cf06-b98c2a33dd4f.png)

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

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/4aefcca5-4adb-096a-4d9a-3e3aab8b4ba7.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/a3b8ecc1-ca27-dbb0-c516-0b2001b8a677.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/50fc4310-84f8-25a2-9d6d-9a4d2d8de969.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/316dbc41-8007-32dd-dd6c-a488b61f2e34.png)

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

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

環境変数名は**CODECOV_TOKEN**となる。

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

[CodeCov用のOrb](https://circleci.com/orbs/registry/orb/coveralls/coveralls)があるので、その利用を前提としてconfig.ymlを編集する

ちなみに、**Orbs**とは

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

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

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

```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**を以下のように追記する。

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

```javascript: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
};
```

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

```javascript:jest.config.js(抜粋)
 "coverageDirectory": "./coverage/",
  "collectCoverage": true
```

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/c6c91688-5414-5acd-b7bb-788fe5d7eb4d.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/cb143001-ca36-a28e-86e6-a1aab2b16ee8.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/9adaeae0-b015-b442-f3d5-1e1419ab2c3c.png)

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/900c719e-9c87-3326-6042-7a8563582a41.png)

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/e941f382-cbbc-11b1-be66-09c7f56dce1b.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/59597b76-6898-b247-408f-657da38a32de.png)

3.CircleCI用のConfigを追加する

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/ec969f25-54ae-1ce9-5b33-55c34bee0e50.png)

4.さっそくビルド

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/73ad0cd4-ad8e-5cbb-f786-400d8e46706f.png)

5.予定通りビルド失敗

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/702e1d48-3bda-cfcd-d65c-9c5a1f16dcbd.png)

<font color=red>CodeCovの環境変数を設定していない</font>ので最初のビルドは失敗した。

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/949580c4-f07c-8e3a-59e4-3f8ae7a85e85.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/afe01478-dc90-eecb-40a1-1a34c2d54715.png)

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/5147380e-32d6-beb0-bad2-a06b3b4089f4.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/d870b415-4633-44fe-cdd4-7d001e102e35.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/3e2e43dc-0dd5-4dd0-e857-f9ef9553949b.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/5b3678d5-cf56-13d2-0e3d-d3315f6392eb.png)

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

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

1.CircleCIでビルドする

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/3d5afb66-56a6-ceea-7a7d-8ba2c40d842f.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/f2a3b009-26fd-000b-e6bc-6bf26ab3aebd.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/170a3bd1-6065-c025-8546-035a0a563733.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/091adf76-2419-5646-2517-9b139fb2bba7.png)

ReadmeにCodeCovのバッジ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/cb59a150-2e71-e4c6-fae9-7705808cf3cb.png)が無事表示された
（本プロジェクトは[こちら](https://github.com/riversun/event-listener-helper
))

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/4da0f2a1-87a1-044e-559b-223ee1e18f03.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/57a2fa45-f83c-9d88-6fe6-d1649c78ef85.png)

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