Vue.jsのユニットテストが遅すぎる問題に終止符を。

short answer: --watch

・・・ではないです。

Vue.js良いですよね。
Typescriptはもちろん使ってますよね。ね?
@vue/cli で環境を作ってしまえば、e2eテストもunitテストも実行できるように環境をまるっと作ってくれるので、
何も考えずに

npm run test:unit

これだけで、ユニットテストが動きます。
.vueファイルもテスト可能で、仮想的にコンポーネントをマウントしたりしてテストができます。便利。

しかし、これには致命的な問題が。

起動まで時間かかりすぎ。

はい。実行するのにプロジェクト作っただけの状態でも30秒くらい平気でかかります。
どーせいちゅうんや・・・

開発の中で30秒待つってのはどー考えても効率悪すぎ。これのためだけにvueやめてもおかしくないくらい辛い。

なので、ユニットテストを爆速で回したいわけです。

解法

まず、.vueファイルにロジックを書くのをやめましょう。
plainなtypescriptファイルに書きましょう。
はい。これです。

では、環境を作ります。
vue.jsのプロジェクトを作った段階で、ある程度やるべきことは済んでいるので、手順は3つです。(mocha + chai使ってる前提)

① npm install
ts-node, tsconfig-pathsを追加でインストールします。

npm install --save ts-node tsconfig-paths

これで、tsファイルを直接実行できる環境が整いました。

② tsconfig.jsonの書き換え

- "modules": "esnext",
+ "modules": "commonjs",

modulesを"commonjs"に書き換えます。詳しいことは知らん。

③ package.json に追記
毎回長ったらしく書くのが面倒なので、エイリアスを書いておきます。

"scripts": {
    ...
    "test:ts": "mocha -r ts-node/register -r tsconfig-paths/register 'tests/ts/**/*.ts'"
}

これで、

npm run test:ts

でテストができます。

はい、そしたら tests/tsフォルダの中にテストを書いていきましょう。
もちろんですが、.vueファイルのテストはできませんよ。

消えない不満

本当は、tests/unitにplainなtsファイルをおいて、.vueファイルのテストはtests/vue とか新しく作っておいておきたかったんですが、
@vue/cli-plugin-unit-mocha ライブラリの中にtests/unit を対象にするよう直書きされてるっぽく、、諦めました。(なぜに)
ついでに、*.spec.ts ファイルを対象にテストを回すのですが、こちらも変更不。。ううむ。。

VueのテストはデフォルトがBDDスタイル(expectを使ったテスト)なのですが、これは変えても文句言われません。assertスタイルに変えましょう。

ビヘイビア駆動開発嫌い

私は、BDDが嫌いです。
まず、あのbeとかshouldが嫌いです。英語が分からんので読めません。英文みたいにかけるとか意味わからん。覚えられん。

そして、spec(仕様)を書くってのもちょっとずれてるなと。
仕様だと漏れなく書きたくなるじゃないですか?
境界条件とかね。
テスト書きすぎを助長するような感じを受ける。
リファクタリングするときに邪魔になると思うんですよね。
なので、BDDは好きではないのです。

ということで

という内容の動画をYoutubeにアップロードしました。
環境構築やらもstep by stepで見れるし、たぶん解説もこの記事より丁寧です。BDD嫌いについてももうちょっと掘り下げて話しています。(話してるかな・・・)
よければご覧ください。

紹介がいきなり#15なんですが、line botをゼロから作ってる動画を絶賛配信中です。
チャンネル登録、高評価をお願いします。

この記事が気に入ったらサポートをしてみませんか?