若想確保 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 檔。

若要模組化 Sass，最常用的就是 @import 規則。但在 Dart Sass 推出了一個新功能：模組系統，可用 @use 規則，並透過 namespace 來引入其他 stylesheet 中的成員。