測(cè)試你的前端代碼 - part1（介紹篇）

jimhs 發(fā)布于2019-08-20 15:20 / 3085人閱讀

摘要：測(cè)試光譜光譜的一端單元測(cè)試顧名思義，代碼以單元為單位進(jìn)行測(cè)試。這個(gè)系列文章整體如下測(cè)試你的前端代碼單元測(cè)試測(cè)試你的前端代碼端到端測(cè)試測(cè)試你的前端代碼集成測(cè)試。

本文作者：Gil Tayar
編譯：胡子大哈

翻譯原文：http://huziketang.com/blog/posts/detail?postId=58d3dcb87413fc2e8240855a
英文連接：Testing Your Frontend Code : Part I (Introduction)

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

最近我的一個(gè)剛剛接觸前端開發(fā)的朋友，問我如何測(cè)試他的 app。當(dāng)時(shí)是電話交流的，大家都知道測(cè)試是一個(gè)繁雜的知識(shí)體系，不可能通過電話說清楚，不過我也跟他保證了要給他發(fā)一份“測(cè)試指引”。

然后我通過 Google 搜索測(cè)試相關(guān)的主題，找到了非常多的文章，但是我對(duì)于這些文章所介紹的深度并不滿意。另外對(duì)于一個(gè)前端新手來說，我找不到一個(gè)綜合性的教程能讓前端小白逐步深入地進(jìn)行應(yīng)用測(cè)試。我想要找的是理論結(jié)合實(shí)踐的前端測(cè)試教程。

所以我決定自己寫一個(gè)前端測(cè)試系列。這里就是這一系列的開始。

什么是測(cè)試？

我把測(cè)試定義成：是一段檢測(cè)你的應(yīng)用代碼（也叫“生產(chǎn)代碼”）是否按預(yù)期執(zhí)行的代碼。有些人稱之為 TDD（Test-Driven Development 或者 Test-Driven Design），但是 TDD 是一種特定的測(cè)試方法，它先寫測(cè)試，然后用測(cè)試來驅(qū)動(dòng)產(chǎn)品的設(shè)計(jì)和實(shí)現(xiàn)。

坦率地講，我認(rèn)為在生產(chǎn)代碼完成之前寫測(cè)試代碼，還是在完成之后寫測(cè)試代碼并不重要。只要你寫了足夠多的測(cè)試樣例測(cè)試你的生產(chǎn)代碼，直到你對(duì)你的生產(chǎn)代碼已經(jīng)足夠有信心就好。但是有很多人（包括我所尊敬的人）認(rèn)為順序很重要，這里我持自己的保留意見。

一個(gè)不好的現(xiàn)象是現(xiàn)在工業(yè)界已經(jīng)把測(cè)試和 TDD 的概念混淆在一起，這樣對(duì)于寫生產(chǎn)代碼的開發(fā)者所寫的測(cè)試代碼，就沒有一個(gè)標(biāo)準(zhǔn)術(shù)語來稱呼了。我傾向于叫它開發(fā)測(cè)試，或者普通測(cè)試。如果你對(duì) “TDD vs 普通測(cè)試” 的討論感興趣，可以看這里，不過我建議你把我這個(gè)系列博文看完再參與討論。

為什么測(cè)試？

我不打算在這里討論為什么要進(jìn)行測(cè)試。如果你不想寫測(cè)試，那你就不寫。不過你需要手動(dòng)地一遍又一遍地測(cè)試你的 web 應(yīng)用，這簡直糟透了。那些討厭的 bug，會(huì)不斷地過來討擾你。把這樣的代碼部署到生產(chǎn)環(huán)境，將是你噩夢(mèng)的開始。

所以，我不打算深入討論為什么要進(jìn)行測(cè)試。

測(cè)試的類型

另外一個(gè)新手學(xué)習(xí)測(cè)試很容易有疑問的地方是：有很多種不同的測(cè)試類型。如果你提前做了點(diǎn)功課的話，你可能聽說過（這里列出部分測(cè)試方法列表）：單元測(cè)試、驗(yàn)收測(cè)試、集成測(cè)試、端到端測(cè)試、組件測(cè)試和服務(wù)測(cè)試。

更糟的是，當(dāng)談到了上面某一個(gè)具體的測(cè)試時(shí)，不同的人又有不同的理解。

這里再次說明我的觀點(diǎn)，我認(rèn)為叫什么名字都不重要，因?yàn)楦鞣N測(cè)試的定義都不難理解。所有的測(cè)試都分布于“測(cè)試光譜”中，光譜的一頭是單元測(cè)試，另一頭是端到端測(cè)試（后面統(tǒng)一稱為 E2E 測(cè)試）。

測(cè)試光譜 光譜的一端——單元測(cè)試

顧名思義，代碼以單元為單位進(jìn)行測(cè)試。那么什么是單元呢？這就不同的編程語言的定義不一樣了。它可以是一個(gè)函數(shù)、一個(gè)模塊、一個(gè)包或者一個(gè)類，甚至是一個(gè)對(duì)象（比如 JavaScript 和 Scala 語言）。在 JavaScript 中，通常是以類或者模塊作為一個(gè)單元。

以單元進(jìn)行測(cè)試很重要的一點(diǎn)是其測(cè)試是獨(dú)立的。對(duì)于一些場景這種測(cè)試非常適合，比如算法、某些功能性函數(shù)（如字符串中有多少字符）和包含一組驗(yàn)證性功能的類等場景。

這些場景下進(jìn)行獨(dú)立的單元測(cè)試非常容易，因?yàn)樗麄儾灰蕾囉谄渌麊卧５羌僭O(shè)一個(gè)單元依賴于其他單元怎么辦？可以有兩種做法：兩個(gè)單元一起測(cè)試，或者 mock 另一個(gè)單元。

什么是 mock？下面我們舉例來解釋：

假設(shè)一個(gè)模塊是一個(gè)單元，模塊中包含了 writeSumToFile 這個(gè)函數(shù)，函數(shù)接收兩個(gè)數(shù)字參數(shù)，并把他們的和寫入文件中。

這里注意，這個(gè)模塊自己并沒有做寫文件操作。寫文件操作是在另一個(gè)單元 fileSumWriter 中做的。

那么為了測(cè)試第一個(gè)單元，我們既可以傳一個(gè)真實(shí)的 fileSumWriter 進(jìn)來，也可以模擬（mock）一個(gè)寫文件操作（并不用真的實(shí)現(xiàn)寫操作）。

如果我們傳遞一個(gè) mock 到這個(gè)函數(shù)，那么這個(gè)單元測(cè)試，當(dāng)然可以叫做“單元測(cè)試”，因?yàn)闆]有涉及到其他單元。但是如果兩個(gè)單元一起測(cè)試，那么可能就有人說你這并不是單元測(cè)試了。

還是那句話，我不關(guān)心這到底應(yīng)該叫什么。

光譜的另一端——端到端測(cè)試

上面介紹了以一個(gè)單元為單位的測(cè)試。現(xiàn)在介紹端到端測(cè)試——測(cè)試整個(gè)應(yīng)用。測(cè)試過程中，應(yīng)用的所有配置會(huì)設(shè)置成和生產(chǎn)環(huán)境一樣，應(yīng)用中的一切都會(huì)被測(cè)試到。

這兩個(gè)是“測(cè)試光譜”的兩端。上面提到的其他測(cè)試方法，都是分布在這兩個(gè)極端中間。他們的基本思路是逐步擴(kuò)大測(cè)試范圍，被測(cè)試的代碼越來越多，mock 的代碼越來越少。

很多人把這兩個(gè)極端測(cè)試中間的部分叫做“集成測(cè)試”，但是對(duì)于 TDD 崇尚者們來說，集成測(cè)試是另一個(gè)完全不同的概念。在本系列文章中我將會(huì)使用這個(gè)概念模糊的名字——集成測(cè)試，具體說來就是：測(cè)試多個(gè)單元，但不是測(cè)試全部單元。

結(jié)語

那么你的測(cè)試到底在什么測(cè)試層級(jí)上呢？很多人說有一個(gè)測(cè)試金字塔——大量的單元測(cè)試，少部分的集成測(cè)試，非常小部分的端到端測(cè)試。但是我不想討論這些，這個(gè)系列文章我希望討論的是如何對(duì)前端代碼進(jìn)行單元測(cè)試、集成測(cè)試和端到端測(cè)試。

接下來的文章，第一篇將會(huì)介紹前端單元測(cè)試，第二篇會(huì)介紹端到端測(cè)試，第三篇會(huì)介紹集成測(cè)試。

應(yīng)這個(gè)系列的博文需要，我寫了一個(gè)小 app——計(jì)算器——我用它來展示如何進(jìn)行不同類型的測(cè)試。你可以在這里獲取它的源代碼，不過請(qǐng)注意現(xiàn)在還不完整，當(dāng)整個(gè)系列博文完成的時(shí)才算完整。

這個(gè)系列文章整體如下：

《測(cè)試你的前端代碼 - part2（單元測(cè)試）》；

《測(cè)試你的前端代碼 - part3（端到端測(cè)試）》；

《測(cè)試你的前端代碼 - part4（集成測(cè)試）》。

我最近正在寫一本《React.js 小書》，對(duì) React.js 感興趣的童鞋，歡迎指點(diǎn)。