karma、jasmine、PhantomJSでDISCONNECTDが頻発する問題の対処

テニスと麻雀好きな@toshikimiyagawaです。

jenkinsからangularJSのテストをするためにヘッドレスブラウザであるPhantomJSを利用してテスト環境を作成したところ、karma実行時にPhantomJSにつながらないことが頻発しました。

ローカルのmacでは問題ないものの、CUI環境上で実行すると問題が発生するという状況。

同じようなエラーも見つけたのですが、どれも解決には至りませんでした。
https://github.com/karma-runner/karma/issues/598

試行錯誤で解決したのでその内容を書いておきます。

エラー内容

エラーは以下の様な感じ。
もちろんbrowserNoActivityTimeoutを10000msから長くしても同じでした。

$ node_modules/karma/bin/karma start test/karma.conf.js
INFO [karma]: Karma v0.12.25 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Linux)]: Connected on socket EiJL2QiyEcBk_CO-O07G with id 42119278
WARN [PhantomJS 1.9.8 (Linux)]: Disconnected (1 times), because no message in 10000 ms.

成功するときもあってそのときは以下の感じになります。

$ node_modules/karma/bin/karma start test/karma.conf.js
INFO [karma]: Karma v0.12.25 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Linux)]: Connected on socket BpBiH9n1-Wqb12M2PB5V with id 20828307
PhantomJS 1.9.8 (Linux): Executed 1 of 1 SUCCESS (0.036 secs / 0.003 secs)

エラーの再現方法

angularのチュートリアル (https://docs.angularjs.org/tutorial) を利用して以下の様な感じで再現させることができます。

$ git clone --depth=14 https://github.com/angular/angular-phonecat.git
$ cd angular-phonecat/
$ git checkout -f step-0

karma.conf.jsを書き換えます。

module.exports = function(config){
  config.set({

    basePath : '../',

    files : [
      'http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js',
      'http://cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/jquery.velocity.js',
      'http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js',
      'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js',
      'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js',
      'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-mocks.js',
      'http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.compat.js',
      'app/js/**/*.js',
      'test/unit/**/*.js'
    ],

    autoWatch : true,

    frameworks: ['jasmine'],

    browsers : ['PhantomJS'],

    plugins : [
            'karma-phantomjs-launcher',
            'karma-jasmine'
            ],

    junitReporter : {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    },

    singleRun : true,
    colors : false

  });
};

必要なnpmとかは適宜インストールしてください。

エラーの原因と対処法

どうやらfilesの中にCDNのURLが多くあったのが原因みたいでした。
数が少ないと大丈夫なことが多いのですが、多くなるとコケることが出てきます。
コケた場合はリトライはしないみたいで、どれだけタイムアウトの時間を長くしてもタイムアウトする模様。
対処法としては全部wgetでダウンロードして、ローカルに保存しました。

$ mkdir app/lib/
$ cd app/lib/
$ wget 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js'
$ wget 'http://cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/jquery.velocity.js'
$ wget 'http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js'
$ wget 'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js'
$ wget 'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'
$ wget 'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-mocks.js'
$ wget 'http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.compat.js'

karma.conf.jsを書き換えます。

module.exports = function(config){
  config.set({

    basePath : '../',

    files : [
      'app/lib/jquery.js',
      'app/lib/jquery.velocity.js',
      'app/lib/jquery.cookie.js',
      'app/lib/angular.js',
      'app/lib/angular-route.js',
      'app/lib/angular-mocks.js',
      'app/lib/lodash.compat.js',
      'app/js/**/*.js',
      'test/unit/**/*.js'
    ],

    autoWatch : true,

    frameworks: ['jasmine'],

    browsers : ['PhantomJS'],

    plugins : [
            'karma-phantomjs-launcher',
            'karma-jasmine'
            ],

    junitReporter : {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    },

    singleRun : true,
    colors : false

  });
};