筆記: Vue Cli 使用 Vue Testing Library 作測試

打開終端機，輸入 vue ui 先用 Vue Cli 開新專案，選項就一般的 SASS 、 Router 、 ESLint 、

還有這次的主題 Test ，然後會看到 Vue Test Utils 裝好了。然後是神Q超人來六角進行 CI/CD

講座時的教學，npm Vue Testing Library 可以用簡單的方法 DOM 測試，容後詳述，CI自動化

部屬下篇研究，這篇先介紹寫單元測試：

測試的 JS 檔案有幾種放法：xxx.spec.js、xxx.test.js 或是放在_test_資料夾下，也可以在

package.json 下作設定

.vue 檔作個簡單的範例：

簡單的按按鈕加一或減一，測試的目標就是按鈕或欄位是否正確。

新增 addtest.spec.js ，測試命名最好簡單直接，可以一眼明白測試什麼用的。

第一步： import 使用到的 Testing Library API ，以及需要測試的 .vue 檔。

第二步：使用 test 寫測試內容，利用 getByTestId 找到 .vue 檔的 data-testId ，選到顯示的數字

第三步： Jest 經典的斷言寫法 expect() ... .toBe ，檢查內容是否相同。

寫完後 npm test 看到勾勾就解決啦。後面還有自動產生錯誤檔的路徑跟內容...等可以延伸，

或是更複雜的測試。

卡關的部分：不會解的地方，如果用 parcel.js 下載下來 postCSS、TailwindCSS，需要 postCSS

8.0。同樣用 parcel.js 下載，選擇 Vue、SASS、Jest，之後 npm 其他東西，最後寫好作測試的

時候，會有 Cannot find module 'babel-core' 的錯誤，再 google 尋找解法，是 babel7 之後要分開

安裝 babel-core ...等，但始終無法正確執行，找不到是 vue-jest 還是一串哪個路徑錯誤。

筆記