PINTO!株式会社PLAN-Bの情報発信メディア

2018.03.28

藤本 永一

目次
    1. はじめに
      1. 対象者
      2. 今回の環境
      3. この記事のカバー範囲
      4. 今回使うもの
        1. Travis CI
        2. Jest
        3. Node.js
      5. 今回のゴール
    2. 早速始めていきましょう
      1. 01:GitHubでリポジトリ作成
      2. 02:TravisCI登録
      3. 03:アプリケーション作成
        1. package.json
        2. index.html
        3. main.js
        4. my_modules\Calculator.js
      4. 04:Jestでlocalでテスト実行
        1. まずはテストを書きましょう。  
        2. それではJestを実行してみましょう
      5. 05: TravisCIの設定を追加
        1. 1. 設定ファイルの作成
        2. 2. TravisCI上で連携の設定
        3. 3. 連携するリポジトリの選択
      6. 06:プッシュ後TravisCIを確認して見る
    3. まとめ

お世話になっております、藤本です。

昨今、ユニットテストという言葉がどこからでも聞こえてくるようになってまいりました。弊社も最近では、各所で「テスト」という言葉が飛び交っており、ただ作るだけからしっかりと品質を担保した開発へシフトしているように感じます。

しかし、テストは大事なことですが開発スピードを落としてビジネスチャンスを逃すようでは元も子もありません。開発スピードも品質も担保していきたい。そんな要望に答えて現れたのが、CI(継続的インテグレーション)です。自動化されたビルドとテストを行ってくれるシステムです。

私たちはコードを書き、変更をPushするだけでテストが回るわけです。ここで問題があれば、それを修正し再度Pushします。テストコードは書きますが(これが一番アレだったりしますが…)、これまでのユニットテストがなかった頃と負荷は変わりません。

ここでは、javascriptでCIを取り入れ、自動テストが回っている状態までを作ってみたいと思います。CIと聞くと難しそうなのですが、割とあっさりと導入できることを体感していただければと思います。


はじめに

対象者

Web開発な方で、自動テストに興味がある方。
※ GITの知識やGitHubの知識やアカウントはある前提で書いています。

今回の環境

  • GitHub (publicリポジトリ)
  • html + jsな一般的なサイト
  • Node.js 8系
  • Jest 22.2.2
  • Travis CI

この記事のカバー範囲

今回は、「Jest」でのテスト環境の準備から「Travis CI」での自動テスト実行までを取り扱います。

今回使うもの

今回の環境にあるものを簡単に説明します。

Travis CI

Travis CI

Travis CI – Test and Deploy Your Code with Confidence

GitHubと連携して、自動でテストやビルドなどを回してくれるサービスです。
privateリポジトリは有料ですが、publicリポジトなら無料で利用できます。 GitHubのプロジェクトで

Build Status

こんなマークを見たことはありませんか? これはTravis CIのビルド結果のバッチです。 このようなバッチを自分のプロジェクトに追加することで、正常にテスト、ビルドが行われていることをユーザーに示すことができます。

Jest

Jest

Jest · 快適なJavaScriptのテスト

Facebookの開発している、javascript向けのテストライブラリ(テストランナー + テストフレームワーク)です。 テストライブラリは色々とありますが、今回はシンプルなものを選択しています。 設定ファイルなどはなく。「*.test.js」という名前でテスト用のファイルを書き、「Jest」コマンドを実行するだけでテストしてくれます。 ReactやTypescriptなど対応しておりシンプルながら対応範囲も広いです。

Node.js

Node.js

Node.js

知る人ぞ知る、サーバーサイドJavascriptです。 サーバーサイドと書いている通り、サーバー上やお使いのPC上で実行できるjavascriptです。ブラウザはいりません。 これが出たことで、バックエンドな処理もJSで書いたり、コマンドをJSで実装したりできるようになりました。 今回は「Jest」を実行するために使います。 フロントエンドなツールはNode.jsでできているものが多いので入れておいて損はありません。

【余談】
Node.jsのバージョン管理はNVS (Node Version Switcher)がおすすめです。 Windows、Mac、Linux対応なのでどのOSでも同じように使えます。

今回のゴール

電卓のWebアプリを作成します。

電卓のコアになる「Calculator.js」を作成しこれに対してテストを実行します。 今回のサンプルで作成したプロジェクトを公開しておりますので参考にしてください。

CIの流れとしては以下のようになります。
[作業PC] ソース変更・テスト作成 → [GitHub] → [TravisCI] 自動テスト


早速始めていきましょう

01:GitHubでリポジトリ作成

publicなリポジトリを作成してください。名前などはご自分でわかるもので、好きに付けてください。このリポジトリに今回のソースコードを入れて動作確認を行っていきます。

02:TravisCI登録

https://travis-ci.org/にアクセスしてください。サインアップボタンがありますので、押すとGitHubとの連携になります。GitHubにログインし連携を進めてください。

TravisCI

以下のようなTravisCIのダッシュボードにたどり着けば登録完了です。

登録完了

03:アプリケーション作成

それでは、それぞれ作成していきましょう。 完成した表示はこのようになる想定です。

電卓完成予想図

(明らかにButtonが少ないのは気にしないでください。)

package.json

ここにNode.jsでのプロジェクトの設定を書きます。今回は、Jestをインストールする項目と、テストにJestを使う設定が大事な部分です。 ※ 細かい部分は説明を省きます。

devDependenciesの項目にJestのバージョンを指定しています。
scriptsのtest部分にテスト実行コマンドを指定します。

package.jsonができたら以下のコマンドでjestをインストールしてください。

node_modulesというフォルダができて、そこにインストールされJestが使える状態になります。

index.html

main.js

各ボタンのアクションを実装します。

my_modules\Calculator.js

電卓機能を実装します。   今回は、計算式文字列を分解する機能と足し算機能を実装しています。

また、node.jsのモジュールとしても読み込めるようにするため、ちょっと見慣れない書き方になっているかと思います。
これにより、ブラウザ上でもNode.jsでも動くクラスが実装できます。「Jest」はNode.js上で動くためこのように書いています。

ここまでできたら一度ブラウザで表示と動作を確認してみてください。「1+1」などの簡単な計算ができるはずです。


04:Jestでlocalでテスト実行

まずはテストを書きましょう。  

ソースの場所はどこでもいいのですが今回は↓のようにしています。
tests/Calculator.test.js
※ Jestは、「__tests__」フォルダの中、もしくは「*.spec.js」or「*.test.js」という拡張子のファイルをテストファイルとして認識してくれます。

ここでは、先程作ったCalculatorクラスのsum()メソッドのテストを書いてみました。数値を2つ渡すと、それを足した結果が返ってくるメソッドですので、意図した結果かどうかを確認しています。 また、文字列で渡した場合も問題ないかを確認しています。今回はシンプルなメソッドですが、「あれを渡したらコレが返ってくる」の実装が複雑な場合などテストがあるのと無いのとでは安心感が違います。  

特に、JSでは型が緩いため今回のように数値を想定していても文字列が渡ってくることもあります。そんな時でも、「意図した動作」をしているかここで担保することができるわけです。 テストを考えるということも、プログラミングの修行の一環として捉えても面白いです。  

それではJestを実行してみましょう

以下のコマンドを実行します。
※ package.jsonのscriptにてJestが実行されるように設定してあります。

結果(Windowsの場合です。Macもほぼ同じような出力のはずです。)↓

「Tests:       2 passed, 2 total」

と出ているように、2つのテスト中2つ合格しましたよ。と出ています。ここで問題があると、

このように失敗した箇所を教えてくれますので、ソースを修正しましょう。

05: TravisCIの設定を追加

次に、GitHubへプッシュした際にTravisCIが自動でテストを回してくれるように設定していきます。  

  1. 設定ファイルの作成
  2. TravisCI上で連携の設定

1. 設定ファイルの作成

まずは「.travis.yml」というファイルにTravisCIの動作設定を書いていきます。   今回は実行環境の指定のみですが、ビルドの設定や、デプロイの設定などもここに書いていきます。  

language:でプログラミング言語の指定、今回はnode_jsです。 node_js:でNode.jsのバージョンを指定します。

2. TravisCI上で連携の設定

次に、TravisCI上で連携の設定をしていきます。 設定は簡単で、対象のリポジトリを「ON」にするだけです。

3. 連携するリポジトリの選択

https://travis-ci.org/profile/にアクセスするとリポジトリ一覧が出ますので、連携したいリポジトリを「ON」にしてください。

連携するリポジトリの選択

以上です。。。簡単ですね。

06:プッシュ後TravisCIを確認して見る

それでは、 ソースコードに何か修正を入れてGitHubにプッシュしてみてください。 TravisCIの画面を眺めていると、コミットが自動で認識され、テストが回り始めます。 

テスト開始

以下のようになるとテスト成功です!! 

テスト成功_1

テスト成功_2


まとめ

いかがでしたでしょうか?ちょっと敷居が高そうなイメージのCIがおもったより簡単に導入できました。(個人的には)

今回は、自動テストが行われるだけでしたが、ビルドやデプロイ、結果の通知などを行うことも可能です。masterブランチへマージすることでテストしビルドしデプロイされたらかっこいいのではないでしょうか?

かっこいいだけでなく、デプロイにかかる手間も時間も削減されますね。一度導入してしまえば、勝手に回ってくれますので、CIを意識せず開発に集中できます。

まだユニットテストなんて入れてないよという方も、これを機に導入してみてはいかがでしょう?ユニットテストがあることで、コードの変更時に影響などを気にする範囲が狭くなりますし、書き方自体も意識するようになるので、見通しの良いコードになりますよ。