若想確保 UI 不會因意外修改而產生 bug,snapshot 測試就是一個很好用的工具。
若想確保 UI 不會因意外修改而產生 bug,snapshot 測試就是一個很好用的工具。
Jest 提供的 mock 函數可讓你自行決定要 mock 到什麼程度,並且可讓你在呼叫該 mock 函數之後,捕捉呼叫的次數、傳入的參數、使用 new
實例化的 instance,以及你指定要回傳的值,我們可透過這些資訊來測試 mock 函數是否如預期的呼叫。
處理 JS 非同步的常見作法包括 callback、ES6 的 Promise
以及 ES7 的 async
和 await
,而本篇會分別說明如何在 Jest 使用這些 JS 特性來測試非同步程式碼。
每個測試案例都必須是獨立的,不能互相影響,而解決方法就是讓每個測試在執行前進行重設,或在每個測試結束後清除痕跡。在 Jest,提供 setup 和 teardown 的函數,能讓你自訂在執行 describe
區塊或 test
區塊的前後分別要做什麼準備和收尾。
上次介紹了 Jest 提供的 matcher,可讓你驗證程式碼是否符合預期,而這次來說明如何透過 describe
和 test
區塊來組織測試案例。當需求變多時,可針對需求來分類測試案例,將相關的測試放在同一個群組區塊內,此時就會用到 Jest 提供的 describe
和 test
區塊。
Assertion (斷言) 就要測試程式碼的執行結果是否符合預期,如果結果一致,代表測試通過,否則 assertion 就會拋出錯誤,代表測試失敗。而 Jest 提供多種 matcher,能讓你 assert 程式碼執行結果的正確性。
TypeScript 是 JavaScript 的 typed superset,提供強大的型別檢查系統,讓你在編譯時期就能即時發現錯誤,而不是到了 runtime 才發生未知的 bug。上次介紹了 Jest + Babel 的測試環境建置,這次來介紹 Jest + TypeScript 的測試環境建置過程。
最近在學習單元測試,而 Jest 是在前端蠻常見的測試框架,可透過建立測試來確保自己寫的程式碼是否符合需求,而且當改動程式碼時,才能確保是否因不小心而產生的 bug,測試能讓我更有信心的去重構程式碼。
Sass 的 @import
rule 可以引入 Sass 和 CSS stylesheet、提供對 mixin、function 和變數的存取,並且還能將多個 stylesheet 的 CSS 組合在一起。例如:main.scss
內使用 @import
引入 Sass 和 CSS 檔,在編譯 Sass 後,就只會產生一個 main.css
檔。