---
title: Lipoic 前端筆記 - 更新 vitest 測試套件時遇到的一連串問題
image: https://raw.githubusercontent.com/Lipoic/Lipoic-Assets/main/logo/logo.png
lang: zh-tw
---
:::info
本工程筆記資訊

時間：2023/6/10 ~ 2023/6/13
任務：更新 vitest 套件
所屬組別與部門：平台開發部前端組
執行本任務的成員：
- 菘菘 @SiongSng
- 露米諾斯 @lumynou5
:::

平常更新套件通常很簡單，更新、合併即可，有時候頂多改個 API 命名而已，但這次不太一樣，遇到一連串的問題，故記錄下來，對未來或許有幫助。

PR：https://github.com/Lipoic/Lipoic-Frontend/pull/261

菘菘：露米諾斯真的是找 issues 的大師 :place_of_worship::place_of_worship::place_of_worship:。

### 第一個問題 - 替換覆蓋率輸出的函式庫

Vitest 官方的變更紀錄：

> Add @vitest/coverage-v8 package - by @​AriPerkkio in https://github.com/vitest-dev/vitest/issues/3339 (82112)
>
> Vitest now uses v8 code coverage directly for better performance. @vitest/coverage-c8 is deprecated as Vitest no longer uses c8 package for coverage output. It will not be updated anymore, and Vitest will fail in the next version if the user has c8 as their coverage provider. Please, install the new @vitest/coverage-v8 package if you previously used @vitest/coverage-c8.


這個算簡單，只要改一下函式庫名稱就解決了。（雖然後面的問題也有受到這個變更的影響）

### 第二個問題 - 居然無法模擬 HTTP 請求
第一開始執行單元測試的時候，有大量的單元測試失敗（見下圖），本以為是負責模擬請求的套件 [MSW](https://mswjs.io/) 出了問題，但想想又沒有動到不太可能。

後來看到下方有 axios 的錯誤報告，下意識直覺認為是與 axios 互動的地方有問題。

經過了一番研究，發現是因為 MSW 套件無法正常攔截請求，以進行模擬。
後來透過二分法找到是自從 Vitest 0.25.1 版才會有這問題，經過 @lumynou5 露米諾斯電神找到別人也有類似的[問題](https://github.com/vitest-dev/vitest/issues/2305)，知道與 `happy-dom` 的版本有關係，要更新到 `8.0.0` 版或更新版，本以為這樣就結束了，沒想到...

### 第三個問題 - happy-dom 的 URL 相對路徑

修正完前一個問題後，單元測試終於大部分通過了，僅剩下一個未通過，但發生的位置與錯誤內容與先前大不同。

下方的程式碼就是單元測試指出的錯誤，這個在一般的瀏覽器中是可以正常運作的，就是導航到目前 URL 相對的 `/` 位置，例如我現在在 `https://lipoic.org/about`，則會導航至 `https://lipoic.org/`，明顯可看出應該這段程式碼沒有問題。

location.href = '/'

經歷一段時間的 debug 後，再次感謝 @lumynou5 大電神的幫忙，找到也有人有發過類似的 [issues](https://github.com/capricorn86/happy-dom/issues/678)，作者的修復這個 issues 後，會將預設的 `location.href` 模擬為 `about:blank`，就會導致上方程式碼出錯，因為 `about:blank/` 是一種無效的 URL，所以我們要解決這個問題就是修改 location.href 的原先內容。

修復方式就是新增一個測試用的 setup 檔案，將 `location.href` 設定為一個正常的網址，這樣子就大功告成啦！

location.href = 'http://localhost';

export {};

## 總結
經歷了這麼長的除錯過程，我（菘菘）覺得學會找 issues 非常重要，可以藉由前人的經驗快速抓到問題，若是沒有前人的 issues，我可能要翻 source code 一個一個找問題，會花上不少時間，同時這也可顯現開放原始碼的重要性，可以讓社群更容易互相討論，也可以藉由前人的討論節省時間，完成更重要的事情～

---

<small>Copyright © 2022-2023 Lipoic. All rights reserved.</small>

{%hackmd @lumynou5/dark-theme %}
<!-- the theme made by lumynou5 -->