mount と shallowMount の違いを分かってなくて時間を溶かした

Vue の SFC の functional component だった部分を普通の SFC で Composition API を使って置き換えたんだけどテストが通らなくて悩んでいた。

functional component はlistenersというオブジェクトを通じてイベントを発生させるみたいなんだけど、functional じゃなくなるのでこれをテストから消さなきゃいけなくて色々やってた。

Element UI のボタン(el-button)を押したときに emit が正しく行われるかをテストしようとしてるんだけど、wrapper.emitted()がどうしても undefined になってしまって本当に謎だな〜と思っていたが、タイトルの通りshallowMountをmonutにしたら解決した。

shallowMount にすると ELement UI 側がスタブされて、el-button-stubという要素名になる(console.log しまくって確認した)のだけど、こいつをそのまま利用しようとするとうまくいかない。

スタブにすると emit されないので mount にしたんだけど、これは emit をスタブ側に設定すればよかったのか……？

mount を使うことで普通に Element UI のコンポーネントを使って emit をテストできたのでよかったんだけど、これを解決するまでに時間がめちゃくちゃかかった。テスト初心者です。もっと強くなりたい。