測試你的前端代碼 - part1（介紹篇）

本文做者：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 感興趣的童鞋，歡迎指點。