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をゼロから作ってる動画を絶賛配信中です。
チャンネル登録、高評価をお願いします。
この記事が気に入ったらサポートをしてみませんか?