寫(xiě)了一本開(kāi)源小書(shū)《Jest 實(shí)踐指南》

哈嘍，大家好，我是海怪。

前段時(shí)間一直在給公司項(xiàng)目引入 Jest，這過(guò)程中學(xué)到了不少東西，也查了很多相關(guān)資料。最后編寫(xiě)了一本小書(shū)《Jest 實(shí)踐指南》^[1]， 希望能幫助到想了解和學(xué)習(xí)前端測(cè)試的朋友。

• 教程首頁(yè)^[2]
• 教程 Github^[3]
• 教程配套項(xiàng)目 Github^[4]

測(cè)試難點(diǎn)

Jest 看似很簡(jiǎn)單，就像很多博客寫(xiě)的那樣：

expect(sum(1,?1)).toEqual(2)

然而在真實(shí)業(yè)務(wù)中，寫(xiě)出一個(gè)好測(cè)試的難度并不低。我總結(jié)了一下寫(xiě)測(cè)試的幾個(gè)難點(diǎn)：

不會(huì)配置。 Jest 的上手文檔非常簡(jiǎn)單，甚至不需要配置。但真實(shí)情況是只要一個(gè)配置沒(méi)配好，所有測(cè)試都跑不起來(lái)。測(cè)試不像開(kāi)發(fā)，代碼有問(wèn)題可以慢慢調(diào)， 而是一個(gè) 0 - 1 游戲，不是成功就是失敗，挫敗感非常強(qiáng)。

不知道要怎么 Mock。 這個(gè)絕對(duì)是經(jīng)典中的經(jīng)典。雖然官方文檔有教程，但是真實(shí)的業(yè)務(wù)往往不是那么理想，遠(yuǎn)比文檔要復(fù)雜得多。

不會(huì)構(gòu)造測(cè)試用例。 剛接觸測(cè)試時(shí)，很容易把做業(yè)務(wù)那套 “實(shí)現(xiàn) XXX 功能” 的想法代入測(cè)試。但測(cè)試的重點(diǎn)不在于實(shí)現(xiàn)功能，而是構(gòu)造用例。

沒(méi)有測(cè)試策略。 上面是 “技” 的難點(diǎn)，測(cè)試還有 “術(shù)” 的難點(diǎn)。悶著頭肝測(cè)試并不高效，使用合適的測(cè)試策略遠(yuǎn)比寫(xiě) 10 個(gè)測(cè)試用例重要。

上面這些問(wèn)題很容易讓人寫(xiě)出難以維護(hù)和復(fù)雜的測(cè)試。只要業(yè)務(wù)一改，不僅要維護(hù)業(yè)務(wù)代碼還要維護(hù)測(cè)試代碼。這時(shí)，你不禁感嘆：“測(cè)試真浪費(fèi)時(shí)間”，最終放棄寫(xiě)測(cè)試，直接開(kāi)擺。

好的測(cè)試會(huì)讓你獲得很高的代碼信心，而不好的測(cè)試則會(huì)嚴(yán)重拖垮項(xiàng)目開(kāi)發(fā)。所以，大家所厭惡的不應(yīng)該是測(cè)試本身，而是那些維護(hù)性差的測(cè)試。

社區(qū)現(xiàn)狀

目前國(guó)內(nèi)關(guān)于前端測(cè)試的內(nèi)容非常糟糕，在我查找資料過(guò)程中就沒(méi)有一次是不坎坷的。首先是 Jest 的官網(wǎng)就不給力：

先不說(shuō)翻譯的正確性如何，單看這中文的內(nèi)容就讓人沒(méi)有想看下去的欲望，真希望 Jest 能找稍微專業(yè)一點(diǎn)的人來(lái)做翻譯。由于官網(wǎng)的中文翻譯做的實(shí)在太爛，遇到問(wèn)題幾乎在中文社區(qū)是找不到的。

再來(lái)說(shuō)國(guó)內(nèi)關(guān)于測(cè)試的文章，我總結(jié)有三類：

1. 入門(mén)類。 安裝 Jest，外加 expect(1 + 1).toEqual(2) 小例子
2. API 說(shuō)明書(shū)類。 類似于把 Jest 官網(wǎng)抄了一遍
3. 理論類。 詳細(xì)說(shuō)了測(cè)試是什么、為什么、測(cè)試?yán)碚摰?，但最重要?“怎么做” 沒(méi)有說(shuō)

不是說(shuō)這些文章不好，只是這些文章大多數(shù)停留在最初級(jí)，看完還是不會(huì)怎么寫(xiě)測(cè)試。就現(xiàn)狀來(lái)看國(guó)內(nèi)測(cè)試社區(qū)是有進(jìn)步的，至少有不少人在寫(xiě)第三類了，要知道以前基本只有第一類文章。

教程誕生

終于，我看到了 React Testing Library 作者 Kent C. Dodds 的 博客 。

他寫(xiě)了很多關(guān)于測(cè)試思路的文章，每一篇都非常精彩。受他的啟發(fā)，我覺(jué)得有必要把這些思想和技巧分享出來(lái)，最終形成了這本小書(shū)。這本小書(shū)要解決的就是 “怎么做” 這一步。

內(nèi)容

此次教程主要分享測(cè)試的思路為主，雖然以 React 為主要技術(shù)棧，但使用其它技術(shù)棧的讀者依然可以流暢閱讀。

本教程是我結(jié)合了自身實(shí)踐、Kent C. Dodds 文章、StackOverflow、Github Issue 以及別的博客最終總結(jié)出來(lái)的一套實(shí)踐指南。

小書(shū)包含 3 部分：

• 基礎(chǔ)實(shí)踐。 從 0 到 1 寫(xiě)項(xiàng)目和測(cè)試，每一章會(huì)通過(guò)一個(gè)業(yè)務(wù)例子來(lái)分享測(cè)試難點(diǎn)、解法和思路。
• 配套項(xiàng)目。 如果你在某一步卡殼了，也可以參考這個(gè)項(xiàng)目。
• 測(cè)試思路。 分享一些 Kent 的文章（中文翻譯）以及測(cè)試總結(jié)。

最后

我知道很多人看到這個(gè)貼子依然對(duì)測(cè)試嗤之以鼻，可能覺(jué)得寫(xiě)測(cè)試就是扯淡、浪費(fèi)時(shí)間的，也可能你已經(jīng)對(duì)國(guó)內(nèi)的 “短平快” 失望了，這個(gè)我完全能理解。

但我相信總有人愿意寫(xiě)測(cè)試的，我希望在他們學(xué)習(xí)如何寫(xiě)測(cè)試時(shí)能給一個(gè)方向和引導(dǎo)。

如果你喜歡我的分享，可以來(lái)一波一鍵三連，點(diǎn)贊、在看就是我最大的動(dòng)力，比心 ??

參考資料