本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！

ShawnL - Vue.js 3前端測試入門從這裡開始

序

進入公司後已有一段時間，交手過林林總總的專案，除了新專案的開發之外，免不了會碰到既有服務的維護需求。而這些服務當中，年紀輕則有三、四年歷史，更不用提那些年邁的部分了；這些程式碼本身是沒什麼問題，但剛進入公司的我年少輕狂，天真的以為改動程式碼是件簡單的事情，結果一不小心就落入「依賴」的陷阱之中。

過了一年後，我雖然從依賴的泥沼中（？）爬了出來，但回想身在其中時的過程難免感嘆，一邊思考要怎麼樣才能主動防止這種事情發生呢？與此同時，我正好專注於如何整潔（clean）程式碼、重構（refactor）等等心法與技術的應用，因此迫切的需要一樣東西來保證更動的地方沒有出錯，碰巧從相關的資訊文章中看到了「測試」這個詞彙，稍微搜尋了一下，令人嘆為觀止，剛好它填補了我需要的一切。

因此，我迫不及待地踏上了研究測試的道路，深刻的記得當時我最早是看到了保哥分享不同測試之間差異的文章，慢慢瞭解到原來測試還能面向不同的需要，近而拆分成不同的測試類型，甚至根據測試類型搭配的工具也可能有所不同。

然而，研究的過程不如我一開始所想的那樣簡單，我慢慢地陷入了另一個「泥沼」——關鍵字地獄。「斷言是什麼玩意⋯⋯？」、「Dummy Object 又是什麼⋯⋯？」，為了搞清楚這些東西只好一步一步嗑文章與書籍。從單元測試中會玩到的 Mocha + chai + sinon 或 Jest，甚至透過 Cypress 進行端對端測試與視覺回歸測試，然後又遇到不同設備導致快照上出現差異等等想都沒想過的問題⋯⋯。

而這篇系列文的誕生，主要是希望能幫助到那些也想瞭解測試的讀者，透過文章的引導，有脈絡的從單元測試開始學習，並快速瞭解不同的測試工具各自的用途，提供一個魚竿後續再依照自己的需求去改造它；次要的部分則是藉由系列文重新梳理一下目前研究測試的成果，轉化既有的知識為可保存可閱讀的文字；最後則是想與已經在寫測試的開發者們交流心得。

系列文會提到的部分

本系列文重點將著重於 Vue3 在 Vite 開發工具底下，要如何透過 Vitest 與 Vue-test-utils 等測試工具來執行「單元測試」，後續文章也會提及若以不同工具或開發框架要選用哪些工具來配合。

除此之外，本系列文也會提供專用的測試專案供讀者下載，可以一邊在觀看文章的同時，也能一邊操作測試程式碼，實際感受一下測試程式在執行的過程與結果。

而文章架構的部分主要分為六個章節，各個章節希望能達成的目的如下：

• 初始章節：瞭解一下這系列文想傳達的內容 & 學習如何建立一個含有單元測試的專案
• 概念章節：培養寫單元測試的思考脈絡
• 語法章節：在不同測試情境下，專注語法上的學習，之後遇到同類型的案例就有膝反射的效果
• 試驗章節：透過題目促進學習的效果
• 進階章節：加強有關單元測試的品質與延伸單元測試的作用
• 雜談章節：訪談已導入測試的團隊紀錄與心得分享，與回顧本次參與鐵人賽

「預期」的系列文目錄編排

1. 【初始ノ章】前言與系列文 TOC
2. 【初始ノ章】測試建置：跟著系列文專案一起學測試
3. 【初始ノ章】測試建置：在自己的專案加入單元測試來學測試
4. 【初始ノ章】測試建置：Vitest Config Setting 初見
5. 【概念ノ章】測試價值
6. 【概念ノ章】測試脈絡－測試類型：測試金字塔、決定測試目標與工具
7. 【概念ノ章】測試脈絡－測試案例（happy, alternate, sad & edge）
8. 【概念ノ章】測試脈絡－測試程式碼的（Setup, Execise, Verify, Teardown）與 3A
9. 【概念ノ章】測試脈絡－撰寫測試碼
10. 【語法ノ章】案例與情境：describe & it 與實用相關指令
11. 【語法ノ章】Setup & Teardown：beforeAll, beforeEach, AfterAll & AfterEach
12. 【語法ノ章】斷言（Assertion）
13. 【試験ノ章】第一個測驗
14. 【語法ノ章】容器：Wrapper
15. 【語法ノ章】選擇器：Selector
16. 【語法ノ章】容器方法：Method
17. 【語法ノ章】模擬行為：Event
18. 【試験ノ章】第二個測驗
19. 【語法ノ章】Vue API：data, props & emit
20. 【語法ノ章】Vue API：slot, provide/inject & directive
21. 【試験ノ章】第三個測驗
22. 【語法ノ章】模擬替身：Dummy, Stub, Spy, Mock & Fake
23. 【語法ノ章】測試 Vue Router
24. 【語法ノ章】測試 Store (pinia)
25. 【試験ノ章】第四個測驗
26. 【進階ノ章】優良測試：F.I.R.S.T.
27. 【進階ノ章】透過 Vitest UI 檢視測試與觀察依賴
28. 【進階ノ章】覆蓋率
29. 【進階ノ章】漏網之魚
30. 【進階ノ章】TDD
31. 【進階ノ章】重構
32. 【雜談ノ章】訪談
33. 【雜談ノ章】那些沒寫到的

以上是這次系列文預計會想寫的內容，之後會依照實際寫的內容略為調整。

最後，對於團隊本身已經有導入測試環節或是本身很熟稔測試的開發者，若文中有錯誤之處還請多包涵與指正，也歡迎在文章下方留言討論！