程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄
- 文章334
- 標籤474
標籤查看更多
分類查看更多
- Advanced Web Dev Quiz (27)
- Deep JavaScript Foundations v3 (69)
- Full Stack Fundamentals (47)
- JavaScript Hard Parts v3 (50)
- JS地下城 (5)
- Testing Fundamentals (27)
- TypeScript Fundamentals (28)
- Web Performance Fundamentals (41)
- You Might Not Need a Framework (32)
- 學習經歷 (2)
- 生活亂談 (2)
- 程式筆記 (4)
Dev
前端技術、踩坑紀錄與學習筆記
332 篇2026-10-0112 分鐘閱讀
這篇整理 Testing Library 除了 getByRole、getByTestId 外的查詢方法：用 findByAltText 找圖片、getByLabelText 靠標籤定位輸入框，並說明 get 找到多個結果會報錯、getAll 回傳陣列，find 則靠輪詢等待元素出現，處理延遲渲染的時機問題。
2026-10-0129 分鐘閱讀
這篇透過一系列 Accident Counter 練習題，示範 act() 如何等待重新渲染再斷言、initialCount prop 如何讓元件從特定狀態起跑，也記錄一次因為 getByRole 正規表示式打錯、忘記重新 render 而除錯的過程，並比較單一測試涵蓋完整流程跟拆成多個小測試的取捨。
2026-09-1916 分鐘閱讀
講師 Steve Kinney 用一個能跑起來的計數器元件示範測試：用 Testing Playground 找選擇器、用 data-testid 取代易變動的 class，並介紹 toHaveTextContent、toBeDisabled 等 jest-dom matcher，測試手法跨框架皆通用。
2026-09-1916 分鐘閱讀
Testing Library 強迫用螢幕報讀器尋找元素的方式查詢 DOM，示範 getByRole 找不到就直接報錯即是一種驗證，並比較 fireEvent 跟更貼近真實使用者行為、需要 async/await 的 user-event 有何差異，也說明如何用 afterEach 清空按鈕。
2026-09-1814 分鐘閱讀
講師示範一個最陽春的原生 JavaScript 按鈕，示範怎麼驗證它是不是真的按鈕元素、初始文字對不對，以及呼叫 button.click() 模擬點擊後文字有沒有正確變化；也回答學員提問，說明 happy-dom 需要額外安裝、且這套測試手法對 Vue、Angular 這類框架同樣適用，跟框架本身無關。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #HappyDOM #DOMTesting #ArrangeActAssert #TestFiltering 2026-09-1812 分鐘閱讀
講師 Steve Kinney 說明測試其實在 Node 裡執行、根本沒有 DOM 可用，因此需要 JSDOM 或 HappyDOM 在 Node 裡重建瀏覽器 API；並比較兩者準確度與效能的取捨，說明這種做法介於純函式測試與真正啟動瀏覽器之間，也示範怎麼在 vitest 設定裡切換 environment。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #DOMTesting #JSDOM #HappyDOM 2026-09-1713 分鐘閱讀
講師 Steve Kinney 說明 beforeEach 這類 hook 能省去每個測試重複建立資料的樣板，但也提醒過度抽象會讓人看測試時搞不清楚資料從哪來，測試該追求的是簡單清楚，而不是不重複；也說明現代測試框架只要用 async/await，就不再需要手動呼叫 done callback 處理非同步程式碼。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #BeforeEach #AsyncAwait #DoneCallback 2026-09-1731 分鐘閱讀
講師 Steve Kinney 讓學員動手把一個帶隨機能力值與時間戳記的 Character 類別測試補完，示範用 expect.objectContaining 只驗證關心的欄位、用 expect.any 忽略隨機值，到拆成小測試、用大於比較取代寫死初始值，最後用依賴注入把隨機性搬到函式外部，讓測試徹底控制它。
2026-09-1613 分鐘閱讀
講師 Steve Kinney 用一個會產生隨機 UUID 的 Person 類別，示範直接用 toEqual 比對整個物件為什麼注定失敗；並介紹用 expect.any(String) 只驗證型別、或用 expect.stringMatching 驗證 ID 前綴，只鎖定真正在乎的部分，放過真正隨機的那一段。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #Assertions #DeepEquality #AsymmetricMatchers 2026-09-1615 分鐘閱讀
講師 Steve Kinney 說明為什麼物件與陣列這類參照型別無法直接用三個等號比較，帶出 toBe 與 toEqual 的適用場景差異，並用真實案例解釋 toStrictEqual 額外檢查的 undefined 屬性與原型型別，也介紹 .not 修飾詞與只該用來除錯的 test.fails。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #Assertions #ReferentialEquality #DeepEquality MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog