在JavaScript開發的現代世界中，有許多不同的前端框架可供我們用來編寫應用程式，從舊的框架如Backbone.js到較新的Angular、React和Vue等。這些框架通常使用模型視圖控制器（MVC）設計模式或其變體之一，例如模型視圖表現器（MVP）或模型視圖視圖模型（MVVM）。當將這組模式 ...
在JavaScript開發的現代世界中，有許多不同的前端框架可供我們用來編寫應用程式，從舊的框架如Backbone.js到較新的Angular、React和Vue等。這些框架通常使用模型視圖控制器（MVC）設計模式或其變體之一，例如模型視圖表現器（MVP）或模型視圖視圖模型（MVVM）。當將這組模式一起討論時，它們被一些人描述為“Model View Whatever”（MVW），或簡稱為MV*。
這種MV*風格的應用程式編寫方式的一些好處包括模塊化和關註點分離，但最大的優勢之一是能夠編寫可測試的JavaScript代碼。使用MV*允許我們對所使用的模型、視圖和控制器進行單元測試。我們可以為各個類編寫測試，並將這些測試擴展到覆蓋一組類。我們還可以測試渲染函數，並確保網頁上的DOM元素顯示正確。我們可以模擬按鈕點擊、下拉選擇、表單輸入，甚至動畫效果。然後，這些測試可以擴展到頁面轉換，包括模擬登錄頁面和訪問許可權。通過為應用程式構建大量的測試集合，我們能夠確信代碼按預期工作，並隨時重構代碼。
重構代碼是指能夠修改代碼塊或一組功能的底層實現，而不必擔心會無意中引入錯誤。這意味著如果我們有一組測試，那麼只要測試繼續通過，我們就可以自由地重寫底層代碼的任何部分。有句老話說，沒有測試的情況下，我們並非在重構代碼，而只是隨機更改事物。在大量的代碼中，即使是一行代碼的變動也可能產生不希望出現的副作用，在沒有單元測試的情況下很難發現。
在本文中，我們將討論與TypeScript相關的測試驅動開發。我們將重點介紹流行的Jest測試框架用於單元測試，並探索使用Jest進行測試的結構。然後，我們將討論如何編寫非同步測試或處理非同步代碼的測試，以及如何編寫實際修改DOM的測試。最後，我們將討論端到端測試，即使用Protractor和Selenium對運行中網站進行測試。
