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，先獲得成就感，之後才會更有學習的動力~