何かを簡単に作って、ちょっとした勉強になる。そんなシリーズになる予定のものの第3回です。

今回は、シンプルなAPIサーバーをCircleCIで自動テストをします。テストは前回にしてあるものを使います。

完成品はこちら -> sequelize-todo-api-server

JS1日クッキング まとめページ - Qiita

材料

• ユニットテストをした前回のサーバー
• CircleCI
• jest-junit

作り方

1. テストメタデータの設定

テストの結果をテストメタデータとしてファイルへ保存できるようにします。CircleCIでテストした後、テストメタデータをCircleCIへアップロードすると、テスト結果がCircleCIのダッシュボードで確認できるようになります。

Jestのテストメタデータを作成するために、jest-junitをインストールします。

npm install-D jest-junit

jest.config.js というファイルを作り、設定を書いていきます。

module.exports={reporters:["default",["jest-junit",{outputDirectory:"reports/jest"}]],};

ここまでできたら、npm run testでテストを実行すると、reports/jestディレクトリ内にjunit.xmlが生成されるようになります。この中にテストメタデータが入っています。

2. CircleCIの設定ファイルの用意

npm-scriptに

"test:ci":"export NODE_ENV=test && npx jest --ci --runInBand"

を加えます。--ciと--runInBandがCIでJestを使うときに必要になります。

CircleCIで使用する設定ファイルを用意します。設定ファイルは、.circleciディレクトリ内のconfig.ymlに書きます。

version:2.1jobs:build:docker:-image:circleci/node:lts-image:circleci/mysql:8-ramenvironment:MYSQL_USER:sequelizeMYSQL_PASSWORD:sequepassMYSQL_DATABASE:database_teststeps:-checkout-restore_cache:name:キャッシュの読み込みkey:dependency-cache-{{ checksum "package-lock.json" }}-run:name:パッケージをインストールcommand:npm install-save_cache:name:キャッシュを保存key:dependency-cache-{{ checksum "package-lock.json" }}paths:-node_modules-run:name:db を待機command:dockerize -wait tcp://localhost:3306 -timeout 1m-run:name:JUnit をレポーターとしてテストを実行command:npm run test:ci-store_test_results:name:テスト結果を保存path:reports

jobsのbuild内に、使うコンテナと作業を記述していきます。

dockerキーに使用するコンテナを指定します。最初に使うイメージがコマンドを実行するコンテナになります。なので、Node.jsのコンテナを最初に書き、続いてDBのイメージを書きます。DBの設定は環境変数を使用して設定します。circleci/mysqlの環境変数は、MySQLの公式イメージと同じです。

mysql - Docker Hub

ここでは、sequelizeで設定したユーザー名とパスワードだけでなく、使用するデータベースも設定します。使用するデータベースを設定しないとアクセスが拒否されます。

stepsキーに処理を順番に書いていきます。主に、

• checkoutでリポジトリからデータをダウンロード
• npm installでライブラリのインストール
• dockerize -wait tcp://localhost:3306 -timeout 1mでDBが準備できるまで待つ
• npm run test:ciでCI用のテストを実行
• store_test_resultsでテストメタデータをCircleCIへアップロード

ということをしています。

3. CircleCIへリポジトリの登録

CircleCIで自動テストができるようにします。CircleCIに登録をした後、「Projects」のページに移動します。

「Set Up Project」をクリックします。

「Start Building」をクリックします。

新しいブランチ作って、そこにデフォルトの設定ファイルを加えるか尋ねられますが、今回は自分で用意したものを使うので、「Add Manually」をクリックします。

「Start Building」をクリックします。これで、CircleCIで使用するリポジトリの設定ができました。

4. 自動テストをする

では、実際に自動テストをしましょう。Githubにプッシュすると、自動的にCircleCIが処理を始めます。

「Piplines」で、CircleCIの処理中の様子や結果をみることができます。

処理が終わった後、「build」をクリックすると、以下のように処理結果をみることができます。

「TESTS」をクリックすると、テストメタデータからテスト結果を表示してくれます。

テストが失敗しているときは、以下のようにテストメッセージが表示されます。

5. ステータスバッヂの表示

CircleCIのステータスバッヂをGithubに表示することができます。CircleCIのステータスバッヂは、以下のようなものです。

これは、

[![CircleCI](https://circleci.com/gh/[Githubアカウント]/[リポジトリ]/tree/[ブランチ].svg?style=svg)]([画像のリンク先（大抵はGithubのブランチ）])

の中の[]を全部埋めると、MDファイルにステータスバッヂを表示できます。例えば、今回使ったブランチだと、

[![CircleCI](https://circleci.com/gh/kei-lvngbk/sequelize-todo-api-server/tree/ci-test.svg?style=shield)](https://circleci.com/gh/kei-lvngbk/sequelize-todo-api-server/tree/ci-test)

のようになります。これをREADME.mdに含めて、Githubでステータスバッヂを表示しています。

詳しくは下のページを参考にしてください。

Adding Status Badges - CircleCI

おわりに

CircleCIで自動テストをしました。workflowを使ってテスト成功後にデプロイをすることもできるので、使いこなせれば楽ができそうです。Netlifyもそうですけど、設定すればGithubにプッシュすれば自動に何かやってくれます系のサービスはとても便利ですね。

コード -> sequelize-todo-api-server