Vue3 - 組件測試覆蓋率BUG(?)
set: 踩坑分享
tags: Vue Testing
category: Front-End
description: Vue3 - 組件測試覆蓋率BUG(?)
created_at: 2022/07/29 00:00:00

前言
今天剛才在練習寫測試的時候發生很莫名其妙的 BUG,事情大概是這樣的:
同樣一份 code,沒有動到任何 async 相關或是複雜的操作,理論上每一次跑測試應該都要是相同的結果(雖然我覺得就算有也應該都要相同,不然測試還有什麼意義)
事情是這樣子的
先聲明: 先不管說這個組件他本身需不需要被測試,但我預期他覆蓋率是 100%,我就是想都看到100%怎麼樣XD
而在這時他執行時覆蓋率不是 100% 就算了,我把 code 亂改一下後變成 100% ,之後我再把 code 還原回去還是維持 100%,而且我確定他有抓到新的 code 沒有 cache,然後重新跑測試的指令又變回非 100%。
你可能覺得我說的很亂,但他就是這麼詭異,直接上影片可能更清楚:
就是像影片這麼奇妙。
總之我只是想表達他呈現的覆蓋率怪怪的。
找到的解決方案
這是我後來找到的問題點跟解決方案。(不確定是不是真的是這樣,但這是我推測)
我的想法是說不定又是 Vue 的語法糖搞了事情,讓他沒有跟測試相關套件很好的整合。
因為在 SFC 單檔的 .vue 裡面可以只有 <template> 而沒有 <script>,可能我要的就是一個很純的 component,不想要有一些 javascript 的邏輯,只負責包裝。
在想會不會就是測試的時候想嘗試去戳那個 <script> 但沒戳到所以發生奇怪的問題,那你可能會問那為什麼在同一次指令運作的時候他就會忽然變成 100%,這個我就真的不知道他的運作邏輯了(知道的話歡迎跟我說,感謝大神XD),不過我也是在發生這問題才在亂戳想說他為什麼那邊總是怪怪的,結果加東加西測試之後 100%,想說我終於要找到覆蓋率沒滿的原因了嗎?! 結果沒有,我都整個程式碼恢復成原樣了居然還是 100%...
後來測試加上 <script> 做一點事就恢復正常了,空的 <script> 還不行,一定要有東西,就算沒有用到,例如下面這樣都可以:
<script setup>
const a = 5;
</script>
<script setup>
const fn = () => {
return 'hi bug'
};
</script>
你可能會說第二個宣告函數的範例怪怪的,這樣不就又沒 100% 了,對 因為我只是想說這樣他功能就會正常了,像是這樣你沒對這函數寫測試他就會跟你說你 3-4 沒寫到測試,所以你再去補就好:
it("fn", () => {
const wrapper = mount(WelcomeItem, {});
const result = wrapper.vm.fn();
expect(result).toBe("hi bug");
});
總結
雖然說測試覆蓋率不一定要到 100%,但就想說至少在起頭,練習的時候想先把起始專案弄到 100% XD,先獲得成就感,之後才會更有學習的動力~