♚瞭解測試概念:理解測試目的及方向,寫測試不迷惑
♚學習測試語法:跟著範例檔實際測試,加深學習印象
♚測試最佳實踐:撰寫測試也可以寫得既簡潔與優雅
♚搭配現代技術:結合GitHub Copilot愜意撰寫測試
本書內容改編自第14屆iThome鐵人賽Modern Web組的優選系列文章《「你知道這是什麼嗎?」小白也能輕鬆瞭解的Vue3單元測試!Feat. Vitest + Vue Test Utils》。如果你曾遇過下列的狀況:「調整前端程式碼時改東壞西」、「想要最佳化程式碼卻擔心改壞原先的內容」、「擁有自己的前端開源項目而想要提升項目的品質」,那麼你一定不能錯過「前端測試」這項技術。
本書將循序漸進介紹前端工程師要如何撰寫前端測試程式碼,書籍內容從撰寫測試程式碼所需具備的測試概念開始,再透過範例程式碼來深入運用Vitest、Vue Test Utils等工具,最終學會單元測試、Vue元件測試以及Vue周邊生態工具測試該如何進行,並瞭解如何搭配GitHub Copilot來輔助我們撰寫測試。如此一來,我們便可在不影響原先實作程式碼的情況下,透過撰寫測試程式碼來驗證實作程式碼的正確性,使我們進行重構時更有信心,幫助我們撰寫程式碼時考慮得更周全。
【目標讀者】
♚想瞭解前端測試如何撰寫、卻又不知道從何開始的前端工程師。
♚想對前端領域的開源項目撰寫測試的開源貢獻者。
♚想用測試精進前端技能的前端工程師。
本書特色
前端測試就是快速精進前端程式碼的捷徑!
全台第一本高速有效的前端測試絕佳指南,學習前端測試So Easy!
打造堅固且穩定的測試基礎,是高效重構與調整前端程式碼的不二法則!
好評推薦
「本書由淺入深、有脈絡地講述寫測試時必須具備的知識,帶領初學者理解測試的重點與注意事項,十分推薦給想學測試的人。」─ 金筠婷,《D3.js資料視覺化實用攻略:完整掌握Web開發技術,繪製互動式圖表不求人》作者
「本書將前端測試的深度與趣味性結合得恰到好處。踏上這趟神奇的旅途,讓你的前端測試技能更上一層樓吧!強力推薦給每位渴望精進的前端開發者。」─ 莫力全(Kyle Mo),《今晚來點Web前端效能優化大補帖:一次搞定指標×工具×技巧,打造超高速網站》作者
「這是我看過最詳盡介紹單元測試的書沒有之一,大量的實務經驗以及測試邏輯一定可以幫助到對於這項技術困惑的你,我誠心推薦給每位正在學習單元測試路上的朋友們。」─成智遠(Mike),知名講者 / YouTube頻道(成式語言)
Vue.js 3前端測試入門從這裡開始:透過Vitest + Vue Test Utils實現自動化測試(iThome鐵人賽系列書)【軟精裝】
內容描述
目錄大綱
|Chapter 01| 在撰寫測試之前
1.1 對測試的期望
1.2 撰寫測試時的脈絡
|Chapter 02| 設置測試環境
2.1 安裝管理套件工具
2.2 安裝版控工具與複製專案
2.3 瞭解測試環境設定檔
|Chapter 03| 單元測試
3.1 測試情境與測試案例
3.2 準備(Setup)與拆遷(Teardown)
3.3 斷言(Assertion )
|Chapter 04| 元件測試
4.1 容器(Wrapper)
4.2 容器方法(Wrapper Methods)
4.3 模擬元件
|Chapter 05| 控制測試環境
5.1 受測物與依賴物
5.2 測試替身類型
5.3 Vue Test Utils中的測試替身
5.4 Vitest中的測試替身
|Chapter 06| Vue Ecosystem
6.1 Vue Router
6.2 Pinia
|Chapter 07| 相關工具
7.1 Vitest UI
7.2 覆蓋率(Coverage)
|Chapter 08| 最佳實踐
8.1 3A模式結合生命週期
8.2 簡短的行內快照
8.3 工廠模式
8.4 測試公開介面
8.5 F.I.R.S.T.原則
8.6 避免過度使用Setup & Teardown API
|Chapter 09| 透過GitHub Copilot編寫測試程式碼
9.1 前置準備
9.2 實際應用於測試程式碼
作者介紹
作者簡介
林奇璇(ShawnL)
從甜點師轉職為前端工程師後,就一直對於程式設計的美學深感興趣,「既然甜點能做得如此精緻且美味,為何程式碼不行呢」,抱持著這個想法,不斷專注於要如何精進前端程式設計,並且試著透過不同的角度與方式來雕塑程式碼,在研究了各式各樣的程式設計書籍後,驚覺「測試」是一門精通程式設計的必修課,從此踏上了鑽研前端測試的道路,成為前端測試的傳教士。作者曾在{Laravel x Vue}Conf及LearnWeb Taiwan等活動中擔任講者,分享前端測試的知識與價值。
2019年,與UI/UX設計師葉奕彤(Trudy Yeh)共同創辦了「LearnWeb Taiwan」社群,以網頁技術為主軸,舉辦了各種講座與活動,希望能透過這種匯集人才、互相交流的方式,來激發彼此的潛在能力、促進台灣網頁技術的發展。而社群的宗旨便是每個人除了基於本身垂直縱深的專業能力之外,若能搭配橫向的領域知識的理解,便能讓網頁產品在開發時銜接技術上的難處與實務上的考量,讓使用者體驗更加順暢。