田中賢一郎氏の
Webアプリ開発入門: 4.Jest編 Future Coders テキスト
そろそろ中盤です
今回は、7.2.1 InventoryInput.vue
実際に動くコードをテスト駆動開発でやります。
楽しみです。
以下を本にのっとって写経します。
InventoryInput.spec.js
Inventoryinput.vue
unitテスト実行
SyntaxError: Invalid end tag
うーん。タグがどこかで閉じれてないのか、、、
vscode上も、赤の波線が出ているところもあるのですが
出ててもちゃんと動いたこともあったと思うので
あてにできない、、、
https://www.future-coders.net/ の実装コード、また参考にさせてもらいます。
んー。
どこだ？
空白までチェックするのはやめるか、、、
WinMergeの「編集」「設定」で、、
「オプション」の「比較」「一般」の「空白」で「すべて無視」を選択 にしてしまおう。
するとどうなる、、、
だいぶ見やすくなったか。
違う部分を直してみよう。
修正して再度単体テスト実行、、、
3番目のテストで引っかかっている。
TypeError: wrapper.emitted(...)[0].toEqual is not a function
47 |
48 | await wrapper.vm.$nextTick()
> 49 | expect(wrapper.emitted("add")[0].toEqual([{"count":3,"model":"A"}]));
| ^
50 | expect(wrapper.emitted("del")[0].toEqual([{"count":3,"model":"A"}]));
51 | });
52 |
at Object.<anonymous> (tests/unit/InventoryInput.spec.js:49:42)
行数が実際のコードと違うが、大体48行目付近のコードがおかしいと言っている。
答えを目視しても違いがよくわからなかったのでdiff
括弧の位置が、、、、、ちがう。
これも直して、、、
通った、、、
これは厳しい、、、
答えが無かったら軽く数時間はかかるところだ。
括弧の違いとかもうわからない。
実際の仕事で単体テスト実装していたら同様の問題が起きそう。
その時は解決できるのかな、、、
不安だ、、、