この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
このエントリの内容はv2.6.10がリリースされ、現在は修正されています。
こんにちは。サービスグループの武田です。
最近Vueを触り始めました。長らく最新のフロント技術からは離れていたので、いろいろと手探りで進めています。
Vueには開発を便利に進めているツールとしてVue CLIが提供されています。今回はVue CLIで作成したプロジェクトのユニットテストがエラーで落ちてしまう件を調査しましたので共有します。
先に結論
遭遇したエラーは2019年3月19日現在、Vue 2.6.9で発生しているものです。GitHubではすでにPRもマージされていたため次のリリースで解決すると思われます。
環境
今回の検証環境は以下となります。特にsedはMac標準のBSD sedではなく、GNU sedを利用しているため注意してください。
$ sed --version | head -1
sed (GNU sed) 4.4
$ node -v
v10.15.3
$ vue -V
3.5.1
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.14.3
BuildVersion: 18D109
vueコマンドがインストールされていない場合は、npm install -g @vue/cli
でインストールします。前述しましたが、Vueのバージョンは2.6.9です。
事象の再現
まずはVue CLIを利用してプロジェクトを作成します。
$ vue create try-unit-test
presetはManualを選択。
個別に必要なモジュールが選択できます。ここでは全部選択してしまいます(aで全選択)。
その後クラススタイルやTypeScriptなど選んでいきますが、とりあえずすべてデフォルトで進めます。1箇所注意としてユニットテストのモジュールはMocha + Chaiを選択する必要があります。Jestを選択した場合、そもそも今回のエラーは起きません。
すべて選択し終わるとインストールが開始されます。
実際にインストールされたバージョンを確認してみます。package.json
では^2.6.6
という指定がされており、実際には2.6.9
がインストールされています。
$ cd try-unit-test/
$ grep '"vue":' package.json
"vue": "^2.6.6",
$ npm list --depth=0 | grep vue@
├── vue@2.6.9
この状態でユニットテストを走らせてみます。
$ npm run test:unit
ReferenceError: performance is not defined
というランタイムエラーが発生してテストが実行できません。
ワークアラウンド
バグ解消版がリリースされるまでのワークアラウンドとしてglobal.performance
を用意すればテストが実行できます。コマンドは次のとおりで、jsdom
およびjsdom-global
のインストール、global.performance
を設定するスクリプトの作成、ユニットテスト実行時にスクリプトのロードを行います。
$ npm install -D jsdom jsdom-global
$ cat > tests/setup.js <<EOF
require('jsdom-global')();
global.performance = window.performance;
EOF
$ sed -i -e 's/ test:unit"/ test:unit -r tests\/setup.js"/' package.json
準備ができたら再度ユニットテストを実行してみます。
$ npm run test:unit
今度は無事に実行できました。
まとめ
Vueを利用したアプリケーションの開発がなんとなくわかってきたので、次にユニットテストをやろうとしたところハマってしまいました。しかし、調べてみるとIssueが上がっておりしかも解決済みということで、Vueがスピーディに開発されていることをうかがい知ることができました。