【エラー解消法】Vue.js + Karma + PhantomJS + Firebaseでテストしたときのエラー

掲題の環境で、unitテストを走らせたときのエラーについて解決法を書きます。

実行コマンド

npm run unit

エラー内容

error_log

21 01 2020 10:41:54.753:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
21 01 2020 10:41:54.757:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
21 01 2020 10:41:54.802:INFO [launcher]: Starting browser PhantomJS
21 01 2020 10:41:57.789:INFO [PhantomJS 2.1.1 (Windows 8.0.0)]: Connected on socket 91jkqAnyQjiCS3D5AAAA with id 48032196
PhantomJS 2.1.1 (Windows 8.0.0) ERROR
  ReferenceError: Can't find variable: Map
  at webpack:///node_modules/@firebase/app/dist/index.cjs.js:301:0 <- index.js:1043

PhantomJS 2.1.1 (Windows 8.0.0): Executed 0 of 0 ERROR (0.729 secs / 0 secs)

解決策

下記の記事を参考に、テストブラウザをPhantomJSからChromeHeadlessに変更しました。
https://dev.oro.com/posts/2017/07/programming/testing-with-headless-chrome/

実行環境

• Microsoft Windows 10 Home ※仮想環境ではありません
• node v12.14.1
• npm v6.13.4
• package.jsonに記述したunitのスクリプト
  • cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

エラー内容の解釈

Firebase特有のエラーかと思いましたが、そうではありませんでした。

ReferenceError: Can't find variable: Map の意味がわからなかったので、この言葉だけでググるとStackOverFlowの記事がヒットしました。
https://stackoverflow.com/questions/43803151/referenceerror-cant-find-variable-map

Mapというのは、ES6から導入されたオブジェクトのことだそうです。
https://qiita.com/chihiro/items/9965cd7eca0380cf288c

PhantomJSではサポートされてないオブジェクトのため、エラーとなったというわけです。
なお、polyfillで対応しようとしても別のエラーが出るので、おとなしくChromeHeadlessを使ったほうが良いと思いました。
https://stackoverflow.com/questions/41729482/phantomjs-cant-find-variable-map

なお、karma.conf.jsでframeworksにphantomjs-shimを入れていましたが、PhantomJSを使わなくなったので外しました。

感想

フロントの開発は、環境を理解するだけで時間が掛かります。
しかし、その分だけ、色んなツールが出て対応が早くなっているのも嬉しいことです。

たくさん覚えることがありますが、コツコツ取り組んでいきます。