概要

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開発ライフを^^

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

元記事はこちら

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