CircleCI 2.0とCodecovでNodeJSアプリケーションをテストしてカバレッジを測定する方法(CircleCI 2.0のDockerコンテナ利用版)

アプリケーション開発の世界では、CIやCDという言葉はもはや一般的な用語となってきました。その実現のために一昔前まではJenkinsサーバーを自前で構築することが多かったのですが、今ではCircleCIやTravisCIなどのサービスを利用する事で簡単に実現できるようになりました。今回は、CircleCI上でテストを実行させ、Codecov上でカバレッジを測定する方法を紹介します。

CircleCIとは？

CircleCIとはCIやCDを実現するためのSaaSです。YAMLファイルで設定を書くだけで、GithubにPushした対象プロジェクトのCIやCDを自動で行ってくれます。Githubのパブリックなリポジトリであれば無料で利用できます。

一応ですが、CIとは、Continuous Integration (継続的インテグレーション)の略で、要は自動テストを継続的に行って品質を維持しましょう、という考え方です。CDとは、Continuous Delivery (継続的デリバリー)の略で、要は自動テスト後に自動デプロイまで行う仕組みを作って効率化しましょう、という考え方です。一昔前はアジャイル信者みたいな人がこの言葉を好んで使っていましたが、今ではアプリケーション開発においては一般的な言葉なので、もし知らなければ覚えておきましょう。

Codecovとは？

Codeconvとはカバレッジ測定に特化したSaaSです。カバレッジ測定の際にcoverage.lcovファイルを出力さえしておけば、単にプロジェクトを登録するだけで、カバレッジが測定できます。CircleCIとの連携も簡単です。もちろん、Githubのパブリックなリポジトリであれば無料で利用できます。

CircleCIとCodecovの設定方法

それでは設定をしていきましょう。

前提として、すでにテストコードが一つ以上あるNodeJSのアプリケーションがGithub上にあるものとします。

CircleCIとCondecovのアカウントを作る

CircleCIはここから、Codecovはここからアカウントを作って下さい。アカウントを作ると言ってもGithubのアカウントでログインすればOKです。

CircleCIとCondecovにGithubのプロジェクトを登録する

CircleCIでは「ADD PROJECTS」から登録したいプロジェクトを選んで「Set Up Project」をクリックすれば完了です。

Codecovでは「Add new repository」から登録したいプロジェクトを選んで登録すれば完了です。

必要なパッケージをインストールする

カバレッジ測定とCodecovへアップロードするためにパッケージをインストールします。

$ cd my-nodejs-with-test-project
$ yarn add --dev mocha
$ yarn add --dev nyc codecov

一応mochaもインストールしていますが、NodeJSでテストコードを書いたことがある人なら最初からインストールされているはずですね。

package.jsonにコマンドを追加する

CircleCIで実行してもらうコマンドを追加します。

$ vi package.json
  "scripts": {
  ...
    "test": "nyc mocha server/test/**/*test.js",
    "coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov",
    "test-ci":
      "nyc mocha server/test/**/*test.js && yarn coverage",
  ...
  }

テストコマンドをローカル用のtestとCircleCI用のtest-ciに分けておきます。

.nycrcファイルを作る

Nycによるカバレッジ測定のためのファイルを作成します。

$ touch .nycrc
$ vi .nycrc
{
    "check-coverage": true,
    "per-file": true,
    "lines": 90,
    "statements": 90,
    "functions": 90,
    "branches": 90,
    "include": ["server/src/**/*.js"],
    "exclude": ["server/src/config/config.js"],
    "cache": true
}

カバレッジは90%を基準として設定しています。includeはカバレッジ測定の対象とするファイルを、excludeはカバレッジ測定の対象としないファイルを記載します。詳細な設定はNycのGithubを参照して下さい。

これらの設定はpackage.json上に書いてもよいです。

CircleCIのファイルをを作る

CircleCI用のフォルダとファイルを作成します。

$ mkdir .circleci
$ touch .circleci/config.yml
$ vi .circleci/config.yml
version: 2
jobs:
  build:
    working_directory: ~/repo
    docker:
      - image: circleci/node:9.8.0
      - image: circleci/mongo:3.6.3
    steps:
      - checkout
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package.json" }}
          - v1-dependencies-
      - run: yarn install
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
      - run:
          name: Wait for db
          command: dockerize -wait tcp://localhost:27017 -timeout 1m
      - run:
          name: Test
          command: |
            yarn test-ci

内容としては、Docker上にNodeJSとMongoDBのコンテナを作り、先程追加したtest-ciコマンドでテストを実行するように設定しています。詳細はCircleCIの公式ドキュメントを参照して下さい。

GithubにPushする

最後に、プロジェクトをGithubにPushします。

$ git add .
$ git commit -m 'Add CICD configs'
$ git push origin master

すると、自動でCircleCIが実行され、テストを実行した後で、カバレッジ情報をCodecovに自動で送信してくれます。

CircleCIはこんな感じで表示されます。

Codecovはこんな感じで表示されます。

分かりやすいですね。CircleCIではテストが成功すると緑色、失敗すると赤色で表示されます。失敗した場合はログインしているユーザにメールで連絡が来ます。Codecovではカバレッジの条件を満たしていれば緑色、満たしていない場合は赤色で表示されます。これは便利ですね！しかも、ここまでやって無料ですから素晴らしいの一言です。

実は表示されているプロジェクトはそれぞれ異なっているのですが、これはブログ用に自分のプロジェクトから持ってきたものなので気にしないで下さい。もちろん実際は同じプロジェクトで表示されます。

最後に

いかがでしたか？今までJenkinsでやっていたことが、設定ファイルを書くだけでいとも簡単に実現できるCircleCIとCodecovの素晴らしさを知ることができたのではないでしょうか。Githubのプロジェクトであれば積極的に採用すると良いと思います。では。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

最新記事 by KD (全て見る)

• 2020年JS周辺のバックエンド寄りの注目技術！ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
• 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
• ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日