ジャスミンvs. モカ、チャイ、シノン

JSでのテストは、ますます一般的になっています。 しかし、どこから始めればいいのでしょうか? JSテストを記述するためのAPIを提供する多くのフレームワークがあります。



この記事は、2つの一般的なJSテストフレームワークJasmine 2とMochaの違いの概要です。 また、最も人気のあるChaiおよびSinonライブラリについても説明します。これらのライブラリは、JasmineおよびMochaと組み合わせてよく使用されます。



1. API(アプリケーションプログラミングインターフェイス)



JasmineとMochaのAPIは非常に似ています。 どちらも、BDD(Behavior Driven Development)アプローチを使用したテスト作成をサポートしています。 「BDDとは」と尋ねることができますか? 要するに、これは機能を音声言語で記述する能力を提供するテストを書くためのアプローチです。



describe('calculator', function() { describe('add()', function() { it('should add 2 numbers together', function() { // assertions here }); }); });
      
      







アサーションまたは期待は、しばしば呼ばれるように、提示されるフレームワークが異なります。 Mochaには組み込みのアサーションライブラリがありません。 Node.jsおよびブラウザーで使用するオプションには、Chai、should.js、expect.js、およびbetter-assertがあります。 ほとんどの開発者は、 アサーションライブラリとしてChaiを選択します。 Mochaにはアサーションライブラリが含まれていないため、テスト環境に接続する必要があります。 チャイには3つのタイプのアサーションがあります。



1)すべき

2)期待する

3)断言する



タイプexpectは 、jasmineフレームワークを提供するexpectと似ています。 たとえば、addメソッドのテストを作成し、calculator.add(1、4)が5であると期待する場合、このテストはJasmineとChaiの両方を使用して同様に見えます。



 //Jasmine expect(calculator.add(1, 4)).toEqual(5);
      
      





 //Chai expect(calculator.add(1, 4)).to.equal(5);
      
      





よく似ていますよね? JasmineからMochaに切り替える場合、パスは非常に簡単です-Chaiをexpectタイプで使用します。



2.テストダブルス(ダブルス)



テストダブルスはテストのために1つのオブジェクトを別のオブジェクトに置き換えます。 ジャスミンでは、 テストダブルの役割はスパイによって果たされます。 Spyは、ロジックを変更する元の関数を置き換える関数であり、この関数がテストの一部としてどのように使用されるかを説明します。



スパイでは次のことができます。



1) スパイ関数が呼び出された回数を調べる

2)戻り値を指定して、テストコードが目的のアルゴリズムに従って動作し続けるようにします。

3) spy関数がエラーをスローすることを示します。

4) spy関数が呼び出された引数を調べます。

5) spy関数が元の関数を呼び出すように指定します。 (彼女が置き換えた)



Jasmineでは、次のように既存のメソッドのスパイを作成できます。



 var userSaveSpy = spyOn(User.prototype, 'save');
      
      





置き換えたいメソッドがない場合でも、 スパイを作成することもできます。



 var spy = jasmine.createSpy();
      
      





Mochaにはテストダブルライブラリが組み込まれていないため、 Sinonをダウンロードしてテスト環境に接続する必要があります。 Sinonは非常に強力なTest Doublesライブラリで、Jasmineと同等以上のスパイ機能を提供します。 Sinonのブレークテスト スパイスタブ 、およびモックという 3つの異なるカテゴリに分けられます 、それらの間には微妙な違いがあります。



Simon のSpy関数は元のメソッドを使用して呼び出されますが、Jasmineではこの動作を指定する必要があります。 例:



 spyOn(user, 'isValid').andCallThrough() // Jasmine // is equivalent to sinon.spy(user, 'isValid') // Sinon
      
      





この例では、元のuser.isValidが呼び出されます。



次のタイプのテストダブルは、元のメソッドを置き換えるスタブです。 スタブの動作は、元のメソッドが呼び出されないJasmineのスパイのデフォルトの動作に似ています。



 sinon.stub(user, 'isValid').returns(true) // Sinon // is equivalent to spyOn(user, 'isValid').andReturns(true) // Jasmine
      
      





この例では、user.isValidメソッドが呼び出されると、元のuser.isValidメソッドは呼び出されませんが、その偽バージョンが呼び出され、結果「true」が返されます。



あなた自身の経験から、ジャスミンスパイテストダブルに必要なほぼすべてをカバーしているので、ほとんどの場合、ジャスミンを使用する場合はシノンは必要ありませんが、必要であれば、一緒に使用する機会があります。 JanonSinonを使用する主な理由は、 偽のサーバーです。



3.非同期テスト



Jasmine 2.xおよびMochaの非同期テストも同様に実装されます。



 it('should resolve with the User object', function(done) { var dfd = new $.Deferred(); var promise = dfd.promise(); var stub = sinon.stub(User.prototype, 'fetch').returns(promise); dfd.resolve({ name: 'David' }); User.get().then(function(user) { expect(user instanceof User).toBe(true); done(); }); });
      
      





この例では、Userは静的なgetメソッドを持つコンストラクター関数です。 getメソッドは、XHRリクエストを実行するfetchメソッドを内部的に使用します。 getメソッドが値を取得すると、その値がUserのインスタンスになることを確認したい。 User.prototype.fetchメソッドに「スタブ」を使用し、事前定義済みのpromiseを返すように彼に指示したため、実際のXHRリクエストは実行されません。 このコードの対象範囲は引き続き非同期です。



it構造内のコールバック関数が引数(この場合は完了)を予期していることを示すのは非常に簡単で、 テストランナーテストが完了する前に関数が実行されるまで待機します。 引数が特定の時間内に呼び出されない場合、テストは中断され、エラーが表示されます。 これにより、テストがいつ完了するかを完全に制御できます。 上記のテストは、ジャスミンとモカの両方で機能します。



Jasmine 1.3を使用している場合、非同期テストはそれほどきれいに見えません。



Jasmine 1.3の非同期テストの例:



 it('should resolve with the User object', function() { var flag = false; var david; runs(function() { var dfd = new $.Deferred(); var promise = dfd.promise(); dfd.resolve({ name: 'David' }); spyOn(User.prototype, 'fetch').andReturn(promise); User.get().then(function(user) { flag = true; david = user; }); }); waitsFor(function() { return flag; }, 'get should resolve with the model', 500); runs(function() { expect(david instanceof User).toBe(true); }); });
      
      





この例では、テストは最大500ミリ秒待機して非同期操作を完了します。そうしないと、テストは失敗します。 waitsFor()関数は常にフラグをチェックします。フラグがtrueになるとすぐに実行が継続され、次の実行ブロックが呼び出されます。



4.シノンフェイクサーバー



シノンがジャスミンに対して持っている機能の1つは、その偽サーバーです。 これにより、特定のAJAX要求に対する偽の応答を設定できます。



 it('should return a collection object containing all users', function(done) { var server = sinon.fakeServer.create(); server.respondWith("GET", "/users", [ 200, { "Content-Type": "application/json" }, '[{ "id": 1, "name": "Gwen" }, { "id": 2, "name": "John" }]' ]); Users.all().done(function(collection) { expect(collection.toJSON()).to.eql([ { id: 1, name: "Gwen" }, { id: 2, name: "John" } ]); done(); }); server.respond(); server.restore(); });
      
      





この例では、GET要求を/ usersに送信することにより、2人のユーザー(GwenとJohn)に関するデータを含む200応答を取得します。 これはいくつかの理由で非常に便利です。 まず、使用するAJAXライブラリに関係なく、AJAXリクエストを行うコードをテストできます。 次に、AJAX要求を行い、promise promiseを実行する前に返されたデータを前処理する関数をテストできます。 第三に、成功したリクエストに対していくつかの応答を発表することが可能です。 たとえば、次の場合:クレジットカードからの資金の引き出しが成功した、古いカード、誤ったCVVコードなど さまざまな答えが来るでしょう。 AngularJsで作業した場合、 Sinon Fake Serverは$ httpBackendサービスに似ています。



結果:



Jasmineフレームワークには、 アサーションテストダブルスパイを通じて実装)機能など、必要なほぼすべてのものが含まれています。 Mochaにはこの機能はありませんが、 アサーション (最も人気のあるChai )のライブラリー選択を提供します。 テストダブルの場合、 Mochaは追加のライブラリも必要とします。ほとんどの場合、sinon.jsです。 Sinonは、独自のフェイクサーバー (フェイクサーバー)を提供することにより、素晴らしい追加機能にもなります。



JSのテストフレームワークを選択するのは難しい作業になる可能性があります。この記事が正しい選択をするのに役立つことを願っています。 いずれにせよ、使用するものに関係なく、あなたは間違えられません。 いいテストをしてください!



オリジナル記事



All Articles