Day 45:測試框架與 JavaScript 函式進階

今日閱讀進度

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

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

測試框架核心概念

測試框架的四大角色

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

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

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

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

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

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

為什麼要用測試框架?

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

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

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

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

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

易錯提醒

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

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

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

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

  • 測試具有可信度

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

實作狀態

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


JavaScript 型別系統

原始型別 vs 物件型別

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

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

  • null / undefined

  • number / string / boolean

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

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

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


函式的進階概念

陳述式 vs 表達式

  • 陳述式(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)使用情境

IIFE 的設計目的: developer.mozilla

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

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

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

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

下一步學習規劃

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

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

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


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