概要
vue-cliで作成したプロジェクトでyarn test:unit ってすると単体テストが走って便利なのですが、1度きりの実行だしフルコンパイルが毎回かかるし、遅くて辛かったのでなんとかしました。
前提
View CLIのプロジェクト作成時にManually select features でunit testingにMocha を選択してる環境です。
package.jsonのscripts にtest:unit が定義されているかと思います。
対応
> cd Vueプロジェクトのディレクトリ
> yarn test:unit --watch
# npmの場合
> npm run test:unit --watch
はい。
--watch を足してあげると、コンパイルとテスト後に完了せず、待ち受けてくれます。
ソースに変更があると、該当のテストだけ実行してくれるっぽいです。
コンパイルもvue-cli-service serve と同様に初回以降は早いです。
package.jsonに追加してしまうのもありだけど、全てテスト実行したいときに悩ましいです。
package.json
- "test:unit": "vue-cli-service test:unit"
+ "test:unit": "vue-cli-service test:unit --watch"
比較
--watch がないときー
WEBPACK Compiled successfully in 25350ms
MOCHA Testing...
Hoge.vue
✓ renders props.hoge when passed (132ms)
HelloWorld.vue
✓ renders props.msg when passed (92ms)
2 passing (298ms)
MOCHA Tests completed successfully
Done in 87.52s.
--watch があるときー(初回)
WEBPACK Compiled successfully in 25340ms
MOCHA Testing...
Hoge.vue
✓ renders props.hoge when passed (126ms)
HelloWorld.vue
✓ renders props.msg when passed (67ms)
2 passing (862ms)
MOCHA Tests completed successfully
(終わらずに待機)
--watch があるときー(初回以降、1ファイル変更)
WEBPACK Compiled successfully in 786ms
MOCHA Testing...
HelloWorld.vue
✓ renders props.msg when passed (61ms)
1 passing (111ms)
MOCHA Tests completed successfully
(終わらずに待機)
はい。快適になりました。
それでは、良きVue.js開発ライフを^^
