Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

JSでテストコードを書く その0003-02 package.jsonをリポジトリのrootに配置せずにCircleCI上でユニットテストを実行する

参考にさせて頂いたページ

package.jsonをroot以外のディレクトリに置いてnpm installする方法について

karmaのconfファイルを指定して--single-runする方法について

circle.ymlの書き方について

package.jsonをrootに配置して良い場合

package.jsonリポジトリのrootに配置して良い場合について先日書きました。

はじめに

前回の記事では、リポジトリのrootにpackage.jsonとかkarma.conf.jsとか色々置いていました。

業務など実際のプロジェクトでは、jsのユニットテストを実行するためだけにpackage.jsonやkarma.confなどを色々とrootディレクトリに追加すると散らかるので、jsのユニットテストに関連するファイルは、frontendディレクトリを作成してこの中に収めようと思います。

前提として、前回書いた以下の記事の続きとして書いていきます。

frontendディレクトリを作成してjsのユニットテスト関連ファイルを全て格納する

まずforntendディレクトリを作成します。

次に./gitと.gitignoreとREADME.mdはそのまま残して、テストに関係するファイルを全てfronendディレクトリに格納します。

以下のような構造になります。

practice_circle_ci_karma/
  ├─.gitignore
  ├─.git/
  │  └─(略)
  ├─README.md
  └─frontend
    ├─karma.conf.js
    ├─package.json
    ├─js/
    │  └─application-xxx.js
    ├─node_modules/
    │  └─(略)
    └─spec/
       └─application.spec.js

circle.ymlの作成

リポジトリのrootにcircle.ymlファイルを作成します。

以下のようになります。

practice_circle_ci_karma/
  ├─.gitignore
  ├─.git/
  │  └─(略)
  ├─circle.yml
  ├─README.md
  └─frontend
    ├─karma.conf.js
    ├─package.json
    ├─js/
    │  └─application-xxx.js
    ├─node_modules/
    │  └─(略)
    └─spec/
       └─application.spec.js

circle.ymlの記述内容

dependencies:
  pre:
    - npm --prefix ./frontend install ./frontend

test:
  pre:
    - ./frontend/node_modules/karma/bin/karma start ./frontend/karma.conf.js --single-run

npm --prefix ./frontend install ./frontendで、frontendディレクトリ内のpackage.jsonの記述内容に基づいて、frontend/node_modulesにパッケージがインストールされます。

./frontend/node_modules/karma/bin/karma start ./frontend/karma.conf.js --single-runでfrontend/karma.conf.jsの記述内容に基づいて、karmaによるユニットテストが実行されます。

.gitignoreのnode_modulesを無視する記述を修正する

node_modulesディレクトリもリポジトリのrootに配置しなくなったので、前回の記述を以下のように修正しました。

*/node_modules

リポジトリをpushして、CircleCIのビルドを実行する

pushします。

circle.ymlに記述されたコマンドが実行されて、前回のようにテスト結果が緑になったら成功です。