資訊專欄INFORMATION COLUMN
摘要：測試光譜光譜的一端單元測試顧名思義，代碼以單元為單位進行測試。這個系列文章整體如下測試你的前端代碼單元測試測試你的前端代碼端到端測試測試你的前端代碼集成測試。
本文作者：Gil Tayar
編譯：胡子大哈翻譯原文：http://huziketang.com/blog/posts/detail?postId=58d3dcb87413fc2e8240855a
英文連接：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 到這個函數，那么這個單元測試，當然可以叫做“單元測試”，因為沒有涉及到其他單元。但是如果兩個單元一起測試，那么可能就有人說你這并不是單元測試了。
還是那句話，我不關心這到底應該叫什么。
光譜的另一端——端到端測試上面介紹了以一個單元為單位的測試?，F在介紹端到端測試——測試整個應用。測試過程中，應用的所有配置會設置成和生產環境一樣，應用中的一切都會被測試到。
這兩個是“測試光譜”的兩端。上面提到的其他測試方法，都是分布在這兩個極端中間。他們的基本思路是逐步擴大測試范圍，被測試的代碼越來越多，mock 的代碼越來越少。
很多人把這兩個極端測試中間的部分叫做“集成測試”，但是對于 TDD 崇尚者們來說，集成測試是另一個完全不同的概念。在本系列文章中我將會使用這個概念模糊的名字——集成測試，具體說來就是：測試多個單元，但不是測試全部單元。
結語那么你的測試到底在什么測試層級上呢？很多人說有一個測試金字塔——大量的單元測試，少部分的集成測試，非常小部分的端到端測試。但是我不想討論這些，這個系列文章我希望討論的是如何對前端代碼進行單元測試、集成測試和端到端測試。
接下來的文章，第一篇將會介紹前端單元測試，第二篇會介紹端到端測試，第三篇會介紹集成測試。
應這個系列的博文需要，我寫了一個小 app——計算器——我用它來展示如何進行不同類型的測試。你可以在這里獲取它的源代碼，不過請注意現在還不完整，當整個系列博文完成的時才算完整。
這個系列文章整體如下：
《測試你的前端代碼 - part2（單元測試）》；
《測試你的前端代碼 - part3（端到端測試）》；
《測試你的前端代碼 - part4（集成測試）》。
我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/8755.html
摘要：測試光譜光譜的一端單元測試顧名思義，代碼以單元為單位進行測試。這個系列文章整體如下測試你的前端代碼單元測試測試你的前端代碼端到端測試測試你的前端代碼集成測試。 showImg(https://segmentfault.com/img/remote/1460000008812278?w=998&h=354); 本文作者：Gil Tayar 編譯：胡子大哈 翻譯原文：http://hu...
摘要：前端日報精選專題之跟著學節流冴羽的博客全家桶仿微信項目，支持多人在線聊天和機器人聊天騰訊前端團隊社區編碼的奧秘模塊實現入門淺析知乎專欄前端每周清單發布新版本提升應用性能的方法中文寇可往吾亦可往用實現對決支付寶的微信企業付款到零 2017-06-20 前端日報 精選 JavaScript專題之跟著 underscore 學節流 - 冴羽的JavaScript博客 - SegmentFau...
摘要：我記得大三參加騰訊的校招面試時只準備了幾種常見的排序算法就足以應對了，然而今年包括今日頭條在內的多家大廠的前端筆試題目中都出現了貪心算法動態規劃分治算法等進階性的算法題目。本篇博客參考今日頭條銀國徽老師的《js版數據結構與算法》Part1改編自《漫畫算法》原作者：程序員小灰前言眾所周知，與后臺開發人員相比，算法是我們前端開發人員的一個弱項。而近兩年隨著互聯網行業競爭愈發激烈，市場上對前端崗位...
摘要：單元測試上一節有討論過，單元測試就是以代碼單元為單位進行測試，代碼單元可以是一個函數，一個模塊，或者一個類。單元測試是最容易理解也最容易實現的測試方式。在寫單元測試的時候，盡量將你的單元測試獨立出來，不要幾個單元互相引用。 showImg(https://segmentfault.com/img/remote/1460000008823416?w=997&h=350); 本文作者：G...
摘要：單元測試上一節有討論過，單元測試就是以代碼單元為單位進行測試，代碼單元可以是一個函數，一個模塊，或者一個類。單元測試是最容易理解也最容易實現的測試方式。在寫單元測試的時候，盡量將你的單元測試獨立出來，不要幾個單元互相引用。 showImg(https://segmentfault.com/img/remote/1460000008823416?w=997&h=350); 本文作者：G...
閱讀 1375·2021-10-14 09:43
閱讀 4208·2021-09-27 13:57
閱讀 4551·2021-09-22 15:54
閱讀 2547·2021-09-22 10:54
閱讀 2349·2021-09-22 10:02
閱讀 2107·2021-08-27 13:11
閱讀 866·2019-08-29 18:44
閱讀 1638·2019-08-29 15:20
