【Quasar CLI Vite / Vitest】重構:invalid JS syntax. Instakk @vitejs/plugin-vue 報錯

好久沒寫blog,可見也沒遇到什麼想紀錄的問題。
這次是把舊專案從 webpack 改成Vite,Vuex 改 Pinia。
過程是沒什麼問題,但移 Unit Test 在環境上踩了個小坑,記錄如下。

既然都改用Vite,所以也想棄 jest 跳 vitest 了,順便修正一下自己以往的測試觀念,不要再依賴什麼都用 mock 解決的做法。

照官方文件的指示裝好@quasar/quasar-app-extension-testing-unit-vitest。從 webstom 跑 Run All tests 出現以下報錯。大意是沒裝@vitej/plugin-vue這個套件,所以無法解析JS


那直覺就是裝起來,但裝起來跑之後,報錯沒有消失。並且,原本單一跑可以跑的範例也出現報錯。

看了老半天,quasar-testing-unit-vitest其實已經有裝 @vitejs/plugin-vue了,我再裝一次等於兩個版本。Quasar使用的版本沒跟那麼快,產生版本衝突。趕快倒車從 package.js 刪掉,重新 yarn install
 

最後發現是webstom測試設定的問題,原本的working directory設定是‘資料夾/專案名稱,但其實我專案裡還有一個frontend資料夾。把正確路徑補上,重跑 Run All Tests 成功



有時遇到版本衝突,我自己心情都很煩,常常不自覺罵髒話一邊Dependencies拆拆裝裝。可是這種事也是經過一番寒徹骨,終得梅花撲鼻香,解開也是會感到開心的。

我自己非本科生,寫這些紀錄時,總會想到「如果剛好讀的人是新手,會不會不知道具體的環節該怎麼做?」。總想著要寫得簡單、清楚,縱使是一些基本指令,也要寫出來。

當初寫程式只是想做點小東西,然後分享一些藝術史方面的心得,沒想到有一天程式會佔據我的主要生活。但對我來說,寫程式和研究藝術的過程確實很像,都是一段不斷搜索、整合、尋找答案的過程。我很享受。

留言