程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄
- 文章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-1248 分鐘閱讀
自訂 Claude Code status line 的三行設定：目錄與 git 狀態、context 使用率、prompt cache 冷熱與失效原因，加上 5 小時與 7 天用量上限，附完整腳本。
2026-10-0614 分鐘閱讀
Mock Service Worker 借用 service worker 攔截網路請求的能力，在應用程式邊界假造後端回應，不用動到任何自己的程式碼，測試跑得更快更穩定，也能在 API 還沒做完時先往下開發；同時介紹 Playwright 搭配 HAR 錄製重播網路流量，實戰應用在跨裝置視覺回歸測試上。
2026-10-0513 分鐘閱讀
這篇用 Playwright 測試熟悉的 Accident Counter app，示範 page.goto 搭配無障礙查詢也能用在整個頁面上；也拆解一個容易被忽略的細節：單純呼叫 page.getByTestId() 不會真的查 DOM，locator 是惰性的，要真正做出動作或搭配斷言才會觸發檢查。
2026-10-0515 分鐘閱讀
這篇介紹端對端測試工具 Playwright：它直接開一個真瀏覽器操作整個網站，跟只測單一元件的 Testing Library 不同；示範待辦清單 app 的測試範例，說明 --ui 模式怎麼看互動時間軸、挑選擇器，也點出 Playwright 比單元測試重、慢、容易偶發失敗，但能先拿到整體覆蓋率。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Playwright #EndToEndTesting #BrowserAutomation #UIMode 2026-10-0416 分鐘閱讀
這篇示範時間這種難靠依賴注入迴避的東西，該怎麼用假時鐘測試：用 vi.useFakeTimers 凍結時鐘、advanceTimersByTime 手動撥快、advanceTimersToNextTimer 跳到下個計時器，搭配 setSystemTime 固定當下時間，測試橫幅計時隱藏與相對時間顯示。
2026-10-0419 分鐘閱讀
這篇拆解一個天生難測的 log 函式：內部直接讀取環境變數、也直接 import 外部依賴，示範用 vi.stubEnv 假造環境變數、用 vi.mock 整個模組硬解，並點出這些做法容易讓測試失去意義的代價，最後示範改用依賴注入，把環境判斷跟外部依賴都變成參數，讓測試回歸單純的輸入輸出驗證。
2026-10-0318 分鐘閱讀
這篇是實戰練習：替 AlertButton 元件寫測試，用 vi.spyOn(window, 'alert') 監看按鈕點擊後的 alert 呼叫，過程中因為忘記先清空輸入框，意外抓到預設值跟輸入文字串接在一起的 bug，最後也討論比起監看內建函式，把預設行為改成可覆寫的 prop 傳進去會是更好的做法。
2026-10-0314 分鐘閱讀
這篇示範用 vi.fn() 建立全新的 mock 函式，取代 spy 包住既有函式的做法，適合當 callback prop 驗證呼叫情形；也示範 mock Math.random 讓亂數測試可預期，但點出改動函式行為會讓測試失真的風險，並說明比起直接 mock 內建函式，用依賴注入傳入可控函式更安全。
2026-10-0210 分鐘閱讀
用 vi.spyOn 監看 console.log，示範 spy 不像 mock 會取代原函式，而是在旁邊觀察呼叫次數與參數，搭配 toHaveBeenCalled、toHaveBeenCalledWith、toHaveBeenCalledTimes 驗證回傳值裡看不到的副作用，例如避免 API 被打太多次。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #TestDoubles #Spies #SpyOn #ToHaveBeenCalled #SideEffects 2026-10-0214 分鐘閱讀
這篇整理 Test Double 這個涵蓋 mock、spy、stub 的上位概念：為什麼要在測試裡隔離 API、時間、第三方套件等外部依賴，什麼時候該用、什麼時候會用力過猛，restore、reset、clear 三種還原方式差在哪，以及 Vitest 底層其實是包了十幾年歷史的 Sinon、Chai。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #TestDoubles #Mocks #Spies #Sinon #Chai #Jasmine #TestIsolation MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog