search
LoginSignup
5

More than 1 year has passed since last update.

posted at

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

概要

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

開発環境と構成

  • 開発環境
開発言語 JavaScript(ES6)/Node.js
テストフレームワーク Jest
Gitホスティング GitHub
CIツール CircleCI
カバレッジレポート CodeCov
  • 構成
    全体としてはざっくり以下のような構成となります

image.png

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

  1. codecovを開く

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

image.png

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

image.png

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

image.png

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

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

image.png

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

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

image.png

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

image.png

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

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

image.png

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

ポイント

  • orbscodecov: codecov/codecov@1.0.5を追加する

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

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

Jestの設定

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

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

  • 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オプションをつけて、必要なときに生成するアプローチでもアリ)

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

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

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

image.png

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

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

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

image.png

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

image.png

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

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

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

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

image.png

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

image.png

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

image.png

3.CircleCI用のConfigを追加する

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

image.png

4.さっそくビルド

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

image.png

5.予定通りビルド失敗

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

image.png

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

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

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

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

image.png

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

image.png

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

image.png

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

image.png

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

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

image.png

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

image.png

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

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

1.CircleCIでビルドする

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

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

image.png

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

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

image.png

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

image.png

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

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

image.png

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

image.png

まとめ

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

image.png

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5