karmaにsinon.jsいれて、fakeServerをつくる

概要

SPAのテスト用にAPIサーバーをモックしたいが、nockのような感じでシンプルに実装したい(nockはブラウザ環境であるkarmaでは動かない)。

mochaを使うのも冗長なので、sinonjsを使うことにした。

実装

karmaのconfigにsinonを加える。これで、テスト内でsinonがグローバルで使える。

// karma.conf.js

...,
frameworks: ['jasmine', 'sinon'],
...,
plugins: [
  ...,
  require('karma-sinon'),
],
...,

テストコードは以下のように書いた。①から⑥の順番で処理が実行される。

③→④→⑤→⑥と処理が走るのがポイントで、server.respond();がasync関数のレスポンスを返し、⑤で実際のテスト、⑥でjasmineの非同期テスト終了関数doneを呼び出している。

// test.js

import request from 'superagent';

describe('sinonjs', function() {
  let server = null;

  beforeEach(() => {
    // ①疑似サーバの生成
    server = sinon.fakeServer.create();
  });

  it('fakeServer', (done) => {

    // ②レスポンスの指定
    server.respondWith('GET', '/some/endpoint', [
      200, { 'Content-Type': 'application/json' }, 'res',
    ]);

    // ③リクエスト
    request
      .get('/some/endpoint')
      .end(function(err, res) {
        expect(res).to.be('res'); // ⑤実際のテストコード
        done(); // ⑥非同期テストの終了
      });

    // ④疑似サーバからレスポンスを返す
    server.respond();
  });

  afterEach(() => {
    // ⑦疑似サーバを破棄
    server.restore();
    server = null;
  });
});

参考

• Sinon.JSのFakeServerでAjaxをテストする - Qiita
• fakeServer - Sinon.JS Documentation
• Asynchronous Support - jasmine introduction.js