工具

Test Runner

• Vitest
• Jest
• Mocha

Test Assertion

• Vitest Expect
• Jest Expect
• Chai

Test Double & Mock

• Vitest Mock
• Jest Mock
• Sinon

Component Testing

• Vue Test Utils: for Vue3

測試種類

Mutation Testing

• Stryker Mutator

相關書籍、文章

• XUnit Test Patterns
• Robert C. Martin - 無瑕的程式碼－敏捷軟體開發技巧守則
• Martin Fowler - 重構｜改善既有程式的設計, 2/e
• Roy Osherove - 單元測試的藝術
• Kent Beck 的測試驅動開發：案例導向的逐步解決之道
• Mark Ethan Trostler - 可測試的 JavaScript
• Edd Yerburgh - Vue.js 應用測試
• CODE COMPLETE：軟體開發實務指南, 2/e
• goldbergyoni/javascript-testing-best-practices

單元測試 Unit Testing

• Martin - UnitTest
• otischou - 暸解單元測試

斷言庫 Assertion Library

• Chris - 讀 Jest Doc - 斷言庫

測試替身 Test Double

• Teddy Chen - Test Double（1）：什麼是測試替身？
• Teddy Chen - Test Double（2）：五種替身簡介
• Teddy Chen - Test Double（3）：Dummy Object
• Teddy Chen - Test Double（4）：Test Stub
• Teddy Chen - Test Double（5）：Test Spy
• Teddy Chen - Test Double（6）：Fake Object
• Teddy Chen - Test Double（7）：Mock Object
• Martin Fowler - TestDouble
• 被蛇咬到的魯卡 - Unit Test 中的替身：搞不清楚的Dummy 、Stub、Spy、Mock、Fake
• Julian Chu - 測試中常見的名詞：Stub, Dummy, Mock..等等

Conf

• Edd Yerburgh - Unit testing Vue components Why test, what to test, and how to test Vue components
• Natalia Tepluhina - 7 ways to make your Vue Unit tests better
• Anthony Fu - Introduction to Vitest

測試相關議題

TDD

• 就是91 - 30天快速上手TDD

Coverage

• Teddy Chen - 透過測試涵蓋率讓重構更有信心（上）：分支涵蓋率
• Teddy Chen - 透過測試涵蓋率讓重構更有信心（中）：突變測試
• Teddy Chen - 透過測試涵蓋率讓重構更有信心（下）：特徵測試
• Martin Fowler - TestCoverage

那些沒說到的部分

在開賽時，起初寫了個預期的 TOC 來規劃要講哪些內容，然而隨著每天撰文下來，覺得有部分內容比較偏向額外的學習，因此在評估後，決定調整原先 TOC 的內容，定義一下我認為至少先學到哪個部分就已足夠開始在實際專案中應用，而這一段落主要是來小談一下這些異動的章節有哪些，以及為什麼會有這些異動與將來是否會再陸續補充。

焦油坑

史前動物 焦油坑

程式, 軟體系統, 軟體產品, 軟體系統產品 差異與成本

樂趣：

• 趣味與獨特
• 對他人有用
• 推理解謎
• 持續學習

苦難：

• 須完美，因為一有缺失看得出來
• 別人設定目標 提供資訊
• 仰賴他人
• 臭蟲
• 產品上市時已過時

如果解決這焦油坑便是這本書要處理的事情

人月神話

紐奧良 Antoine 餐廳

好菜都得多花時間準備

軟體專案不順 => 多半是缺乏良好時程規劃

原因：

• 預估時間技術不成熟
• 誤把工作量當成專案進度 => 反應以為人力跟工時是可以互換的
• RD 無法篤定時程 => PM 無法堅持 Antoine 餐廳美學
• 軟體工程時程缺法監控 => 卻用其他工程領域被證明或可行的技術拿來套用並改革
• 以為延遲增加人手就可以更快

本書不講工程時程監控這件事情！

最佳實踐（Best Practice）

程式語言本身可分為語法（Syntax）與語意（Semantics）兩部分：語法的部分主要受限於語言中的設計以及工具基於這些設計打造了什麼功能供我們使用，而語意的部分則是我們如何透過這些語法，來設計、歸納好我們想表達的邏輯。

同樣地，測試程式碼也是程式碼的一環，在撰寫測試程式碼的時候，我們除了語法上的學習之外，也應當考量測試程式碼的可讀性與維護性等等。

而今天的主題，我們要來一起欣賞開源專案 《JavaScript 測試的最佳實踐》，在這份指南中集結了大量的文章與書籍所給予撰寫測試程式碼上的建議！

由於這份指南說真的沒有很長，個人非常推薦把這個項目的內容完整閱讀一遍，因此本文主要傾向補充說明我個人的看法；並將本系列文提過的概念條列出來，讓讀者可快速回想。

若是英文苦手的開發者朋友們，也可以參考由
YuBin 所翻譯的 中文版本！

程式碼覆蓋率（Code Coverage）

在測試領域中，覆蓋率（Coverage）一詞泛指的是以百分比表示測試程式碼能夠涵蓋多少產品程式碼的範圍，而依據不同的覆蓋率種類，其細微的定義也會有所不同。

接下來我們以覆蓋率工具庫 c8 來說明覆蓋率的概念與如何透過 c8 在 Vitest 測試環境中檢視當下的測試覆蓋率，最後再來談談有關於覆蓋率的相關議題。

Vitest UI

經過了一個月多，我們也從測試基礎概念一路講到實際上的語法和簡單的應用，而有關於測試的部分，還有許多值得我們去探討的地方，因此從今天開始要來談談一些有關於測試的相關輔助工具與議題，看看這些東西要怎麼協助我們更好的撰寫測試。

Pinia 測試

• Pinia 簡介
• Pinia 測試關注點
• Pinia 測試實作
  • 測試 Store 本身行為
  • 測試 Store 與 Vue 元件之間的互動

本文序

前幾天測試替身相關章節最主要的強項主要都是在當我們專案實作過程中有依賴外部模組或工具時，我們可以透過替身的方式來測試我們的邏輯，而不需要真的去執行外部模組或工具，這樣可以減少測試時間，也可以避免測試時因為外部模組或工具的問題而造成測試失敗。

因此測試替身我們必須先走過一次概念，才能更好的理解替身本身要做的事情；接著語法的部分則要瞭解到 Vue Test Utils 與 Vitest 提供了哪些語法可以供我們選擇使用；最後，在測試的部分我們才能透過洽當的概念和語法來撰寫出更好的測試案例。

所以今天我們就要來看看當我們在使用 Vue 周邊工具時，我們要如何利用測試替身來撰寫測試案例！

Vitest 的測試替身－續篇

今天要來繼續介紹 Vitest 的這些 Mocking API：

• Functions：用於模擬函式
• Globals：用於模擬全域變數
• Modules：用於模擬模組引入

接下來的內容會稍微有複雜一點點，但且讓我們先專注在學習語法的部分！

本文序

今天要來介紹在 Vitest 工具中，有關於測試替身的語法有哪些內容，並且一樣會參考 Gerard Meszaros 的五大測試替身概念，來看看我們應該如何實際應用在真實的測試案例當中！