More than 5 years have passed since last update.

【jasmine + Karma】の単体テストをCircleCIで実行されるようにしてみた

Last updated at 2017-06-12Posted at 2017-01-03

【jasmine + Karma】による AngularJs 単体テストをしてみた
で作ったプロジェクトについて、CircleCIを使って、githubにpushされたらkarmaでjasmineの単体テストが実行されるようにしてみました。

CircleCI の設定

CircleCI の登録

CircleCIの「Authorize Github」で、githubアカウントでcircleCIの登録を行います。

CircleCI で Buildを行いたいレポジトリを選択

CircleCIのAdd Projectで、ciで回したいリポジトリを追加します。
今回は、リポジトリ「test-circleCI」を追加しようと思いますので、
下記添付画像の ① > ② > ③ の順でクリックしていきます。

build projectをクリックした段階で、対象のリポジトリに対してBuildが行われます。

circleCIの設定を置いていなくてもなんかいい感じにnpm testを実施してうまいこといっている雰囲気なのですが、nodeのversionが古かったりするので、circle.ymlでちゃんと記述してこうかと思います。

circle.yml

node versionの上げ方については、ここを参考にしてます。てゆうかまんまコピペ・・・

依存関係は、「dependencies」で記述するらしい？ので、ここで、npm install を行います。
キャッシュが悪さしてnpm install 失敗するのもいやなので、npmのキャッシュを消してからnpm install しています。

最後に、testとして、package.jsonに記述しているkarma実行scriptを叩いています。

circle.yml

machine:
  timezone:
    Asia/Tokyo
  node:
    version: 6.3.0
  post:
    - npm install -g npm@3

dependencies:
  override:
    - npm cache clean
    - npm install

test:
  override:
    - npm run karma

Coverage

CircleCIのArtifactsにCoverageのhtmlを吐き出したいのですが、ローカルでは、./Coverageに吐き出したい。

ということで、karma.config.jsのcoverageReporterプロパティを追加します。
htmlを吐き出すディレクトリは、
ローカルの時は、 ./coverage/
CircleCIの時は、Artifacts/coverage/
となるようにします。

karma.config.js

+  var reportDir = process.env['CIRCLE_TEST_REPORTS'] || '.';

+  coverageReporter: {
+    dir: reportDir + '/coverage/',
+    reporters: [ { type: 'html' } ]
+ },