カテゴリー
Linux

『Vue.js入門 基礎から実践アプリケーション開発まで』 8.8.7 単体テストユーティリティの導入 ● Vue Test Utilsによる効率化、の PhantomJS が動かなかったので ChromeHeadless で動くようにした記録

はじめに

  • 『Vue.js入門 基礎から実践アプリケーション開発まで』
    • 8.8.7 単体テストユーティリティの導入
      • ● Vue Test Utilsによる効率化

単体テストコードの編集が完了したら動作確認のため、 npm run unit で単体テストを実行しましょう。

実行しましたら、動きませんでした＞＜。修正内容をノートいたします。

プラグイン不足

PhantomJS でなく、 ChromeHeadless

browsers として、 PhantomJS が使用できませんでした。かわりに、 ChromeHeadless そ使用しました。そのために、足りないパッケージの導入も必要でした。

npm install --save-dev karma-chrome-launcher

Cannot find plugin "xxx" 、 Can not load reporter "xxx"

ウェブブラウザ不足

PhantomJS でなく、 ChromeHeadless を指定しましたが、これを使うためには、ローカルに Chrome がインストールされている必要がありました。ちなみに、今回の "ローカル" は、Docker のコンテナが該当します。

No binary for ChromeHeadless browser on your platform. Please, set "CHROME_BIN" env variable.

ChromeHeadless を使用するために Chromium インストールとパスを設定しました。

apt-get update
apt-get install chromium
chromium --version
which chromium
export CHROME_BIN=/usr/bin/chromium

CHROME_BIN をコマンドで設定しましたけれども、テストの設定ファイルで指定する方法もあるように思います。

余談ですが、いつでも利用できるように Chromium をコンテナに最初からインストールしておくのも良さそうです。

参考ページです。

Running as root without –no-sandbox is not supported. See https://crbug.com/638180.

Chrome Headless の起動オプション設定を編集しました。参考ページにはワークアラウンドと記載がありましたけれども、記載の方法で無事動きました♪

ファイルの修正内容

以上のページを参考にし、手元の設定ファイルは次のように編集することで無事、動かすことができました。

  • package.json は、実際に手作業で編集したわけではなく、 npm install --save-dev karma-chrome-launcher することで自動的に編集された。
  • test/unit/karma.conf.js の phantomjs-shim は実は不要なのではないかと予想しているが、試していない。

package.json

     "html-webpack-plugin": "^2.30.1",
     "inject-loader": "^3.0.0",
     "karma": "^1.4.1",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.2",

test/unit/karma.conf.js

module.exports = function karmaConfig (config) {
     // 1. install corresponding karma launcher
     //    http://karma-runner.github.io/0.13/config/browsers.html
     // 2. add it to the `browsers` array below.
-    browsers: ['PhantomJS'],
+    plugins: [
+      'karma-chrome-launcher',
+      'karma-coverage',
+      'karma-mocha',
+      'karma-phantomjs-shim',
+      'karma-sinon-chai',
+      'karma-sourcemap-loader',
+      'karma-spec-reporter',
+      'karma-webpack'
+    ],
+    browsers: ['ChromeHeadlessNoSandbox'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
     frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
     reporters: ['spec', 'coverage'],
     files: [

補足

成功したときの実行時の結果は次のようになりました。

root@496b66ee2aa3:/app/kandan-app# npm run unit

> kandan-app@1.0.0 unit /app/kandan-app
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

19 12 2018 23:26:59.391:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
19 12 2018 23:26:59.402:INFO [launcher]: Launching browser ChromeHeadlessNoSandbox with unlimited concurrency
19 12 2018 23:26:59.440:INFO [launcher]: Starting browser ChromeHeadless
19 12 2018 23:27:00.022:INFO [HeadlessChrome 71.0.3578 (Linux 0.0.0)]: Connected on socket pPMl8WMGgBugZzkfAAAA with id 22395454

  HelloWorld.vue
    ✓ should render correct contents

HeadlessChrome 71.0.3578 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.054 secs / 0.029 secs)
TOTAL: 1 SUCCESS


=============================== Coverage summary ===============================
Statements   : 100% ( 3/3 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 3/3 )
================================================================================
root@496b66ee2aa3:/app/kandan-app#

おわりに

『Vue.js入門 基礎から実践アプリケーション開発まで』 では PhantomJS は開発終了しているがまだ使えるから本書では使う、ということがどこかに書いてあったように記憶しています。

ですけれども、実際にはエラーとなりましたので、対処したのが本投稿となります。

もっと基本的なことを見逃していて、 PhantomJS でもできたのに、、、という可能性はもちろんございます。

また、進めていったら結局 ChromeHedless が使えなかった、という可能性もございます。

ですが、なんとか対処できたことですし、このまま進めて行く予定です。

以上です。

「『Vue.js入門 基礎から実践アプリケーション開発まで』 8.8.7 単体テストユーティリティの導入 ● Vue Test Utilsによる効率化、の PhantomJS が動かなかったので ChromeHeadless で動くようにした記録」への1件の返信