Edited at

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

More than 1 year has passed since last update.


概要

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