本文作者：Gil Tayar
編譯：鬍子大哈翻譯原文：blog.huziketang.com/blog/posts/…
英文連線：Testing Your Frontend Code : Part I (Introduction)
最近我的一個剛剛接觸前端開發的朋友，問我如何測試他的 app。當時是電話交流的，大家都知道測試是一個繁雜的知識體系，不可能通過電話說清楚，不過我也跟他保證了要給他發一份“測試指引”。
然後我通過 Google 搜尋測試相關的主題，找到了非常多的文章，但是我對於這些文章所介紹的深度並不滿意。另外對於一個前端新手來說，我找不到一個綜合性的教程能讓前端小白逐步深入地進行應用測試。我想要找的是理論結合實踐的前端測試教程。
所以我決定自己寫一個前端測試系列。這裡就是這一系列的開始。
什麼是測試？
我把測試定義成：是一段檢測你的應用程式碼（也叫“生產程式碼”）是否按預期執行的程式碼。有些人稱之為 TDD（Test-Driven Development 或者 Test-Driven Design），但是 TDD 是一種特定的測試方法，它先寫測試，然後用測試來驅動產品的設計和實現。
坦率地講，我認為在生產程式碼完成之前寫測試程式碼，還是在完成之後寫測試程式碼並不重要。只要你寫了足夠多的測試樣例測試你的生產程式碼，直到你對你的生產程式碼已經足夠有信心就好。但是有很多人（包括我所尊敬的人）認為順序很重要，這裡我持自己的保留意見。
一個不好的現象是現在工業界已經把測試和 TDD 的概念混淆在一起，這樣對於寫生產程式碼的開發者所寫的測試程式碼，就沒有一個標準術語來稱呼了。我傾向於叫它開發測試，或者普通測試。如果你對 “TDD vs 普通測試” 的討論感興趣，可以看這裡，不過我建議你把我這個系列博文看完再參與討論。
為什麼測試？
我不打算在這裡討論為什麼要進行測試。如果你不想寫測試，那你就不寫。不過你需要手動地一遍又一遍地測試你的 web 應用，這簡直糟透了。那些討厭的 bug，會不斷地過來討擾你。把這樣的程式碼部署到生產環境，將是你噩夢的開始。
所以，我不打算深入討論為什麼要進行測試。
測試的型別
另外一個新手學習測試很容易有疑問的地方是：有很多種不同的測試型別。如果你提前做了點功課的話，你可能聽說過（這裡列出部分測試方法列表）：單元測試、驗收測試、整合測試、端到端測試、元件測試和服務測試。
更糟的是，當談到了上面某一個具體的測試時，不同的人又有不同的理解。
這裡再次說明我的觀點，我認為叫什麼名字都不重要，因為各種測試的定義都不難理解。所有的測試都分佈於“測試光譜”中，光譜的一頭是單元測試，另一頭是端到端測試（後面統一稱為 E2E 測試）。
測試光譜
光譜的一端——單元測試
顧名思義，程式碼以單元為單位進行測試。那麼什麼是單元呢？這就不同的程式語言的定義不一樣了。它可以是一個函式、一個模組、一個包或者一個類，甚至是一個物件（比如 JavaScript 和 Scala 語言）。在 JavaScript 中，通常是以類或者模組作為一個單元。
以單元進行測試很重要的一點是其測試是獨立的。對於一些場景這種測試非常適合，比如演算法、某些功能性函式（如字串中有多少字元）和包含一組驗證性功能的類等場景。
這些場景下進行獨立的單元測試非常容易，因為他們不依賴於其他單元。但是假設一個單元依賴於其他單元怎麼辦？可以有兩種做法：兩個單元一起測試，或者 mock 另一個單元。
什麼是 mock？下面我們舉例來解釋：
假設一個模組是一個單元，模組中包含了 writeSumToFile 這個函式，函式接收兩個數字引數，並把他們的和寫入檔案中。
這裡注意，這個模組自己並沒有做寫檔案操作。寫檔案操作是在另一個單元 fileSumWriter 中做的。
那麼為了測試第一個單元，我們既可以傳一個真實的 fileSumWriter 進來，也可以模擬（mock）一個寫檔案操作（並不用真的實現寫操作）。
如果我們傳遞一個 mock 到這個函式，那麼這個單元測試，當然可以叫做“單元測試”，因為沒有涉及到其他單元。但是如果兩個單元一起測試，那麼可能就有人說你這並不是單元測試了。
還是那句話，我不關心這到底應該叫什麼。
光譜的另一端——端到端測試
上面介紹了以一個單元為單位的測試。現在介紹端到端測試——測試整個應用。測試過程中，應用的所有配置會設定成和生產環境一樣，應用中的一切都會被測試到。
這兩個是“測試光譜”的兩端。上面提到的其他測試方法，都是分佈在這兩個極端中間。他們的基本思路是逐步擴大測試範圍，被測試的程式碼越來越多，mock 的程式碼越來越少。
很多人把這兩個極端測試中間的部分叫做“整合測試”，但是對於 TDD 崇尚者們來說，整合測試是另一個完全不同的概念。在本系列文章中我將會使用這個概念模糊的名字——整合測試，具體說來就是：測試多個單元，但不是測試全部單元。
結語
那麼你的測試到底在什麼測試層級上呢？很多人說有一個測試金字塔——大量的單元測試，少部分的整合測試，非常小部分的端到端測試。但是我不想討論這些，這個系列文章我希望討論的是如何對前端程式碼進行單元測試、整合測試和端到端測試。
接下來的文章，第一篇將會介紹前端單元測試，第二篇會介紹端到端測試，第三篇會介紹整合測試。
應這個系列的博文需要，我寫了一個小 app——計算器——我用它來展示如何進行不同型別的測試。你可以在這裡獲取它的原始碼，不過請注意現在還不完整，當整個系列博文完成的時才算完整。
下一篇文章將介紹《測試你的前端程式碼 - part2（單元測試）》。
轉載請註明出處，保留原文連結以及作者資訊
我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點。