寫了一本開源小書《Jest 實踐指南》

語言: CN / TW / HK

theme: qklhk-chocolate

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

前段時間一直在給公司專案引入 Jest,這過程中學到了不少東西,也查了很多相關資料。最後編寫了一本小書《Jest 實踐指南》, 希望能幫助到想了解和學習前端測試的朋友。

測試難點

Jest 看似很簡單,就像很多部落格寫的那樣:

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

然而在真實業務中,寫出一個好測試的難度並不低。我總結了一下寫測試的幾個難點:

不會配置。 Jest 的上手文件非常簡單,甚至不需要配置。但真實情況是隻要一個配置沒配好,所有測試都跑不起來。測試不像開發,程式碼有問題可以慢慢調, 而是一個 0 - 1 遊戲,不是成功就是失敗,挫敗感非常強。

不知道要怎麼 Mock。 這個絕對是經典中的經典。雖然官方文件有教程,但是真實的業務往往不是那麼理想,遠比文件要複雜得多。

不會構造測試用例。 剛接觸測試時,很容易把做業務那套 “實現 XXX 功能” 的想法代入測試。但測試的重點不在於實現功能,而是構造用例。

沒有測試策略。 上面是 “技” 的難點,測試還有 “術” 的難點。悶著頭肝測試並不高效,使用合適的測試策略遠比寫 10 個測試用例重要。

上面這些問題很容易讓人寫出難以維護和複雜的測試。只要業務一改,不僅要維護業務程式碼還要維護測試程式碼。 這時,你不禁感嘆:“測試真浪費時間”,最終放棄寫測試,直接開擺。

好的測試會讓你獲得很高的程式碼信心,而不好的測試則會嚴重拖垮專案開發。所以,大家所厭惡的不應該是測試本身,而是那些維護性差的測試。

社群現狀

目前國內關於前端測試的內容非常糟糕,在我查詢資料過程中就沒有一次是不坎坷的。首先是 Jest 的官網就不給力:

先不說翻譯的正確性如何,單看這中文的內容就讓人沒有想看下去的慾望,真希望 Jest 能找稍微專業一點的人來做翻譯。 由於官網的中文翻譯做的實在太爛,遇到問題幾乎在中文社群是找不到的。

再來說國內關於測試的文章,我總結有三類:

  1. 入門類。 安裝 Jest,外加 expect(1 + 1).toEqual(2) 小例子
  2. API 說明書類。 類似於把 Jest 官網抄了一遍
  3. 理論類。 詳細說了測試是什麼、為什麼、測試理論等,但最重要的 “怎麼做” 沒有說

不是說這些文章不好,只是這些文章大多數停留在最初級,看完還是不會怎麼寫測試。就現狀來看國內測試社群是有進步的,至少有不少人在寫第三類了,要知道以前基本只有第一類文章。

教程誕生

終於,我看到了 React Testing Library 作者 Kent C. Dodds 的 部落格

他寫了很多關於測試思路的文章,每一篇都非常精彩。受他的啟發,我覺得有必要把這些思想和技巧分享出來,最終形成了這本小書。這本小書要解決的就是 “怎麼做” 這一步。

內容

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

本教程是我結合了自身實踐、Kent C. Dodds 文章、StackOverflow、Github Issue 以及別的部落格最終總結出來的一套實踐指南。

小書包含 3 部分:

  • 基礎實踐。 從 0 到 1 寫專案和測試,每一章會通過一個業務例子來分享測試難點、解法和思路。
  • 配套專案 如果你在某一步卡殼了,也可以參考這個專案。
  • 測試思路。 分享一些 Kent 的文章(中文翻譯)以及測試總結。

最後

我知道很多人看到這個貼子依然對測試嗤之以鼻,可能覺得寫測試就是扯淡、浪費時間的,也可能你已經對國內的 “短平快” 失望了,這個我完全能理解。

但我相信總有人願意寫測試的,我希望在他們學習如何寫測試時能給一個方向和引導。

如果你喜歡我的分享,可以來一波一鍵三連,點贊、在看就是我最大的動力,比心 ❤️