share facebook facebook twitter menu hatena pocket slack

2018.09.19 WED

Vue.jsの単体テスト実行が遅いのをなんとかしたい

甲斐 甲

WRITTEN BY 甲斐 甲

概要

vue-cliで作成したプロジェクトでyarn test:unit ってすると単体テストが走って便利なのですが、1度きりの実行だしフルコンパイルが毎回かかるし、遅くて辛かったのでなんとかしました。

前提

View CLIのプロジェクト作成時にManually select features でunit testingにMocha を選択してる環境です。

package.jsonのscriptstest: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開発ライフを^^

Vue.js+TypeScriptで開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7

元記事はこちら

Vue.jsの単体テスト実行が遅いのをなんとかしたい

甲斐 甲

甲斐 甲

2018/7にJOIN。 最近の好みはサーバレスです。なんでもとりあえず試します。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。