RSpecライクに書ける!JavaScriptテストフレームワーク“Jasmine”のお話

近年、JavaScriptのテストフレームワークの需要が高まっています。まだデファクトスタンダードと呼べるものがなく、数多くのフレームワークが生まれている状況ですが、今回はその中でも“Jasmine(ジャスミン)”を取り上げてみたいと思います。

JavaScriptでもテストを書こう

20160125_1

記事を読んでくださっているエンジニアのみなさんは、日常的にプログラムを書いている方が多いことでしょう。そして、何かの処理を行うプログラムを書いたら、それに対応した“テストコード”を書く必要があるのも理解していただけることと思います。

一度完成したあと、“二度と変更されないようなシステム”であればテストコードを書くメリットはそれほど無いでしょう。しかし、そんなシステムはもちろんありません。改善要望やバグ対応などのため、プログラムは何度も何度も変更され続けていきます。

そんなときに「プログラムが正しく動作する」ことを保障してくれるテストコードが無ければどうなるでしょうか?全ての機能が想定通りに動いていることを、手作業で確認しなければなりません。それではあまりに手間がかかってしまうので、工数を削減するためにも、プログラムの品質を守るためにも、テストコードを書くことは“必須”と言える作業だと思います。

そして、近年特に需要の高まりを見せているのが“JavaScriptのテストコード”です。

JavaScriptテストフレームワーク“Jasmine”

以前は、JavaScriptのテストコードを書くことはそれほどメジャーではありませんでした。理由としては、以下のようなものが挙げられます。

1. JavaScriptの挙動がWebブラウザに依存しているため、自動化しづらかった
2. 良質なテストフレームワークが登場していなかった

しかし、PhantomJSのようにWebブラウザ無しでJavaScriptの実行が可能なツールが出てきたこと、そして、そのツールを利用した良質なテストフレームワークが誕生してきたことなどから、状況が変わってきました。JavaScriptに対してもテストコードを書くことが、少しずつ主流になりつつあります。

優れたテストフレームワークはいくつもありますが、今回はその中でも“Jasmine(ジャスミン) ”をピックアップしたいと思います。Jasmineの良いところとしては、環境構築が比較的簡単なこと、記法がシンプルで覚えやすいことなどが挙げられます。(しかもRSpecの文法を真似て作られているので、Rubyistにとっては本当に書きやすいです!)

ご説明だけというのも退屈なので、実際にJasmineを使用してテストコードを書いてみましょう。

環境構築

まずは、Jasmineを実行するための環境を作りましょう。環境構築はたったの3ステップで完了します。

1. https://github.com/jasmine/jasmine/releases にアクセスする
2. jasmine-standalone-○.○.○.zip というリンクからzipファイルをダウンロードする
3. zipファイルを解凍する

これで完了です。とても簡単ですね。解凍後、ファイル構成がこのような感じになっていれば成功です。

※コマンドラインから実行する場合はPhantomJSを別途インストールする必要がありますが、今回の手順では割愛します

テストコードを書いてみる

それでは、テスト対象のJavaScriptと、それに対応したテストコードを書いていきましょう。
今回は、このようなプログラムをテスト対象とします。

・3の倍数が入力された場合 ⇒ “AHO”と出力
・3のつく数が入力された場合 ⇒ “AHO”と出力
・それ以外の数が入力された場合 ⇒ 入力された数をそのまま出力

つまり、“3の倍数と3のつく数でアホになるプログラム”です。
※このプログラムはフィクションです。実在の人物や団体などとは関係ありません。

ソースコードは以下のようになります。

nabeatsu.js

ファイル名はなんでもいいのですが、nabeatsu.jsとしておきました。これをsrcディレクトリ下に置きます。
※くり返しますがこのプログラムはフィクションです。実在の人物や団体などとは関係ありません。

対して、テストコードは以下のようになります。

nabeatsu_spec.js

3の倍数、3のつく数、それ以外の数それぞれのパターンに対してテストが記述されています。これをspecディレクトリ下に置きます。そして、SpecRunner.htmlをエディタで開き、さきほど作成したテスト対象のファイル、テストコードのファイルのパスを追加しましょう。これで準備完了です。

ではテストを実行しましょう。SpecRunner.htmlにWebブラウザでアクセスします。

20160125_2

上手くいきました!

参考までに、テストが失敗した場合にはどうなるのかも確認してみましょう。
さきほどのテストコードの一部を

実際の挙動と期待値が食い違うように修正して、再度実行してみます。

20160125_3

テスト失敗の理由が表示されました。この内容を確認することで、どのような原因で失敗したのかを調べることが出来ます。

おわりに

いかがだったでしょうか?Jasmineはとても使いやすく、汎用性の高いフレームワークです。JavaScriptテストフレームワークの導入を考えている方は、ぜひ候補に入れてみてください。


最新情報はFacebook/Twitterをフォロー!


この記事を書いた人:ぞの

img_zono

Webアプリケーションエンジニアとして様々な現場に参画し、多種多様な言語を習得。エンジニアとしての強みは汎用性の高さと、メンバーとコミュニケーションを取り合いながら円滑に案件を進められること。趣味は音楽と将棋。Ruby愛好家。

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。