この記事はJavaScript Advent Calendar 2014の15日目の記事です。
さてさて、EcmaScript6に対する機運が高まっている中で、ES6の新機能の紹介記事が出てきておりますが、ES6が使えるブラウザはまだ浸透しておらず、使おうとするならばTraceur Compilerや6to5といったトランスパイラを利用せざるを得ないというのが現状です。
これらのトランスパイラも実際のプロダクトで使おうとするとまだそこまで実績がないし、いきなり本番で使うという訳にいかない人達が多いかと思っています。
ただし、ES6には慣れておきたい、、、ES6の新機能(let, template-string, arrow function, generator, promise, etc...)を使ってみたい、、、
ならばせめてテストだけでもES6で書こうじゃないか、いずれES6が来た時に文法や新機能だけでも慣れておくために！！
というわけで、mocha x power-assert x traceur でテストを書けるようにするライブラリを作りました。
yosuke-furukawa/espower-traceur · GitHub
mocha x power-assertでテスト書いてる人達は多いと思いますが、それの前段階でtraceur-compiler使ってES6からES5にトランスパイルした上でテストを実行してくれます。
Getting Started
まずはespower-traceur, power-assertをインストール
$ npm install espower-traceur power-assert -D
mochaがインストールされていなければmochaをインストール、ここではglobalに入れるけど、npm testで呼び出すならglobalに入れる必要はありません。
$ npm install mocha -g
テスト対象のファイルを書く
おもむろにこんな感じのコードを書いて、person.jsとでもしておきましょう。
(function(global){ "use strict"; var Person = function(name, age){ this.name = name; this.age = age; }; Person.prototype.getAge = function() { return this.age; }; Person.prototype.greet = function() { return "Hello! I am " + this.name + ". My age is " + this.age; } if (module && module.exports) { module.exports = Person; } else { global.Person = Person; } }(typeof global !== 'undefined' ? global : this));
やってることは簡単で、Personクラス作って、年齢をとったり、挨拶したりするだけです。ここまではまだES5の世界ですね。
じゃあこれをテストするコードをES6で書いてみましょう。
テストコードを書く
こんな感じでmochaで書いて、testフォルダ下にtest/person_test.jsとでもしておきましょう。
// let 変数で宣言するのがES6式 let assert = require("power-assert") let Person = require("../person") // arrow 関数でdescribeを書く describe("Person", ()=>{ let name = "Alice" let age = 4 let alice = new Person(name, age) it("alice get age", ()=>{ assert.equal(alice.getAge(), age) }) it("alice greet", ()=>{ // template stringで文字列埋め込みする assert.equal(alice.greet(), `Hello! I am ${name}. My age is ${age}`) }) })
と設定したら後は、mochaから espower-traceur/guess を呼び出せばOK。
注意：ここでは、describeやitの引数にarrow関数を使いましたが、mochaのコンテキスト変数(this)を利用する場合にはarrow関数を利用するのは避けましょう。arrow関数のthisは常にレキシカル（bind(this)された状態）になります。
テストを実行してみる
$ mocha --require 'espower-traceur/guess' test/*.js
結果
万が一ミスマッチの値があった場合は以下のようにpower-assertが値を表示してくれます。
