• 《單元測試的藝術》3/e 第二章 ~ 2.4 (p. 46)

• 《JavaScript 概念三明治》第四章完、第五章 p.5-23

測試框架不只是幫你跑測試,它整合了四個關鍵元件: developer.mozilla

1. 測試程式庫:提供組織測試的結構 (如 describe、it)

2. 斷言庫:用 expect 驗證預期結果

3. 測試執行器:自動化執行所有測試

4. 結果報告器:視覺化呈現測試通過/失敗狀態

Jest 與 Vitest 還額外提供隔離設施,確保每個測試獨立運行,不互相干擾 ibraheem

使用測試框架帶來的四大優勢: developer.mozilla

• 結構明確:程式碼組織清楚,可讀性高

• 快速迭代:複製測試結構,新測試寫得更快

• 建立信心:節省手動驗證時間,更敢重構

• 共同語言:團隊對測試報告有一致理解

⚠️ 使用測試框架 ≠ 寫出好測試

測試框架只是工具,它不保證:

• 測試程式本身易讀、易維護

• 測試涵蓋所有想驗證的邏輯

• 測試具有可信度

關鍵在於如何設計測試,而非只會使用框架語法 ibraheem

已完成:fork kata repo,移除 Jest 改用 Vitest 環境設定
⏳ 待完成:實作測試練習題

判斷原則:除了原始型別,其他都是物件型別 developer.mozilla

原始型別(Primitive Types)共 6 種:

• null / undefined

• number / string / boolean

• symbol (較少用,透過 Symbol() 產生)

物件型別:陣列、物件、函式等

特別注意:函式是「可被呼叫的物件」,既可以當函式執行,也能當物件使用 developer.mozilla

• 陳述式(Statement):一段描述邏輯的程式碼

• 表達式(Expression):能被 JavaScript 運算並產生數值的程式碼

// 函式陳述式 - 宣告函式
function greet(name) {
  return `Hello, ${name}`;
}

// 函式表達式 - 把函式指派給變數
const greet = function(name) {
  return `Hello, ${name}`;
};

函式具有 name 屬性,可以查看函式名稱: developer.mozilla

function calculateTotal() {
  // 計算邏輯
}

console.log(calculateTotal.name); // "calculateTotal"

函式的三種用途:

1. 當作參數傳進另一個函式 (高階函式 HOF)

2. 模擬物件導向的「類別」寫法

3. 利用 IIFE 建立獨立作用域

IIFE 的設計目的: developer.mozilla

• 讓程式碼在全域環境載入後立即執行

• 利用函式作用域限制變數存取

• 達到與全域環境隔離的效果

(function() {
  const privateVar = '不會污染全域';
  console.log('立即執行');
})();

• [ ] 完成 kata 測試練習實作

• [ ] 繼續閱讀《JavaScript 概念三明治》箭頭函式章節

• [ ] 練習撰寫測試,驗證函式概念理解

學習工具: Vitest + Airbnb JavaScript Style Guide
參考文獻: 《單元測試的藝術》3/e、《JavaScript 概念三明治》

• 《單元測試的藝術》3/e 第二章 ~ 2.4 (p. 46)

• 《JavaScript 概念三明治》第四章完、第五章 p.5-23

測試框架不只是幫你跑測試,它整合了四個關鍵元件: developer.mozilla

1. 測試程式庫:提供組織測試的結構 (如 describe、it)

2. 斷言庫:用 expect 驗證預期結果

3. 測試執行器:自動化執行所有測試

4. 結果報告器:視覺化呈現測試通過/失敗狀態

Jest 與 Vitest 還額外提供隔離設施,確保每個測試獨立運行,不互相干擾 ibraheem

使用測試框架帶來的四大優勢: developer.mozilla

• 結構明確:程式碼組織清楚,可讀性高

• 快速迭代:複製測試結構,新測試寫得更快

• 建立信心:節省手動驗證時間,更敢重構

• 共同語言:團隊對測試報告有一致理解

⚠️ 使用測試框架 ≠ 寫出好測試

測試框架只是工具,它不保證:

• 測試程式本身易讀、易維護

• 測試涵蓋所有想驗證的邏輯

• 測試具有可信度

關鍵在於如何設計測試,而非只會使用框架語法 ibraheem

已完成:fork kata repo,移除 Jest 改用 Vitest 環境設定
⏳ 待完成:實作測試練習題

判斷原則:除了原始型別,其他都是物件型別 developer.mozilla

原始型別(Primitive Types)共 6 種:

• null / undefined

• number / string / boolean

• symbol (較少用,透過 Symbol() 產生)

物件型別:陣列、物件、函式等

特別注意:函式是「可被呼叫的物件」,既可以當函式執行,也能當物件使用 developer.mozilla

• 陳述式(Statement):一段描述邏輯的程式碼

• 表達式(Expression):能被 JavaScript 運算並產生數值的程式碼

// 函式陳述式 - 宣告函式
function greet(name) {
  return `Hello, ${name}`;
}

// 函式表達式 - 把函式指派給變數
const greet = function(name) {
  return `Hello, ${name}`;
};

函式具有 name 屬性,可以查看函式名稱: developer.mozilla

function calculateTotal() {
  // 計算邏輯
}

console.log(calculateTotal.name); // "calculateTotal"

函式的三種用途:

1. 當作參數傳進另一個函式 (高階函式 HOF)

2. 模擬物件導向的「類別」寫法

3. 利用 IIFE 建立獨立作用域

IIFE 的設計目的: developer.mozilla

• 讓程式碼在全域環境載入後立即執行

• 利用函式作用域限制變數存取

• 達到與全域環境隔離的效果

(function() {
  const privateVar = '不會污染全域';
  console.log('立即執行');
})();

• [ ] 完成 kata 測試練習實作

• [ ] 繼續閱讀《JavaScript 概念三明治》箭頭函式章節

• [ ] 練習撰寫測試,驗證函式概念理解

學習工具: Vitest + Airbnb JavaScript Style Guide
參考文獻: 《單元測試的藝術》3/e、《JavaScript 概念三明治》