內文簡介
＜內容簡介＞

前端測試就是快速精進前端程式碼的捷徑！
全台第一本高速有效的前端測試絕佳指南，學習前端測試So Easy！
打造堅固且穩定的測試基礎，是高效重構與調整前端程式碼的不二法則！

♚瞭解測試概念：理解測試目的及方向，寫測試不迷惑
♚學習測試語法：跟著範例檔實際測試，加深學習印象
♚測試最佳實踐：撰寫測試也可以寫得既簡潔與優雅
♚搭配現代技術：結合GitHub Copilot愜意撰寫測試

本書內容改編自第14屆iThome鐵人賽Modern Web組的優選系列文章《「你知道這是什麼嗎？」小白也能輕鬆瞭解的Vue3單元測試！Feat. Vitest + Vue Test Utils》。如果你曾遇過下列的狀況：「調整前端程式碼時改東壞西」、「想要最佳化程式碼卻擔心改壞原先的內容」、「擁有自己的前端開源項目而想要提升項目的品質」，那麼你一定不能錯過「前端測試」這項技術。

本書將循序漸進介紹前端工程師要如何撰寫前端測試程式碼，書籍內容從撰寫測試程式碼所需具備的測試概念開始，再透過範例程式碼來深入運用Vitest、Vue Test Utils等工具，最終學會單元測試、Vue元件測試以及Vue周邊生態工具測試該如何進行，並瞭解如何搭配GitHub Copilot來輔助我們撰寫測試。如此一來，我們便可在不影響原先實作程式碼的情況下，透過撰寫測試程式碼來驗證實作程式碼的正確性，使我們進行重構時更有信心，幫助我們撰寫程式碼時考慮得更周全。

【目標讀者】
♚想瞭解前端測試如何撰寫、卻又不知道從何開始的前端工程師。
♚想對前端領域的開源項目撰寫測試的開源貢獻者。
♚想用測試精進前端技能的前端工程師。

★專家推薦：

「本書由淺入深、有脈絡地講述寫測試時必須具備的知識，帶領初學者理解測試的重點與注意事項，十分推薦給想學測試的人。」
─ 金筠婷，《D3.js資料視覺化實用攻略：完整掌握Web開發技術，繪製互動式圖表不求人》作者

「本書將前端測試的深度與趣味性結合得恰到好處。踏上這趟神奇的旅途，讓你的前端測試技能更上一層樓吧！強力推薦給每位渴望精進的前端開發者。」
─ 莫力全（Kyle Mo），《今晚來點Web前端效能優化大補帖：一次搞定指標×工具×技巧，打造超高速網站》作者

「這是我看過最詳盡介紹單元測試的書沒有之一，大量的實務經驗以及測試邏輯一定可以幫助到對於這項技術困惑的你，我誠心推薦給每位正在學習單元測試路上的朋友們。」
─成智遠（Mike），知名講者 / YouTube頻道（成式語言）

★目錄：

|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」社群，以網頁技術為主軸，舉辦了各種講座與活動，希望能透過這種匯集人才、互相交流的方式，來激發彼此的潛在能力、促進台灣網頁技術的發展。而社群的宗旨便是每個人除了基於本身垂直縱深的專業能力之外，若能搭配橫向的領域知識的理解，便能讓網頁產品在開發時銜接技術上的難處與實務上的考量，讓使用者體驗更加順暢。

相關分類

購物須知

寄送時間	全台灣24h到貨，遲到提供100元現金積點。全年無休，週末假日照常出貨。例外說明
送貨方式	透過宅配送達。除網頁另有特別標示外，均為常溫配送。消費者訂購之商品若經配送兩次無法送達，再經本公司以電話與Email均無法聯繫逾三天者，本公司將取消該筆訂單，並且全額退款。
送貨範圍	限台灣本島與離島地區註，部分離島地區包括連江馬祖、綠島、蘭嶼、琉球鄉…等貨件，將送至到岸船公司碼頭，需請收貨人自行至碼頭取貨。注意！收件地址請勿為郵政信箱。註：離島地區不配送安裝商品、手機門號商品、超大材商品及四機商品。
售後服務	缺掉頁更換新品
執照證號＆登錄字號	本公司食品業者登錄字號A-116606102-00000-0

關於退貨

PChome24h購物的消費者，都可以依照消費者保護法的規定，享有商品貨到次日起七天猶豫期的權益。(請留意猶豫期非試用期!!)您所退回的商品必須回復原狀（復原至商品到貨時的原始狀態並且保持完整包裝，包括商品本體、配件、贈品、保證書、原廠包裝及所有附隨文件或資料的完整性）。商品一經拆封/啟用保固，將使商品價值減損，您理解本公司將依法收取回復原狀必要之費用(若無法復原，費用將以商品價值損失計算)，請先確認商品正確、外觀可接受再行使用，以免影響您的權利，祝您購物順心。
如果您所購買商品是下列特殊商品，請留意下述退貨注意事項：
1. 易於腐敗之商品、保存期限較短之商品、客製化商品、報紙、期刊、雜誌，依據消費者保護法之規定，於收受商品後將無法享有七天猶豫期之權益且不得辦理退貨。
2. 影音商品、電腦軟體或個人衛生用品等一經拆封即無法回復原狀的商品，在您還不確定是否要辦理退貨以前，請勿拆封，一經拆封則依消費者保護法之規定，無法享有七天猶豫期之權益且不得辦理退貨。
3. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，一經您事先同意後始提供者，依消費者保護法之規定，您將無法享有七天猶豫期之權益且不得辦理退貨。
4. 組合商品於辦理退貨時，應將組合銷售商品一同退貨，若有遺失、毀損或缺件，PChome將可能要求您依照損毀程度負擔回復原狀必要之費用。
若您需辦理退貨，請利用顧客中心「查訂單」或「退訂/退款查詢」的「退訂/退貨」功能填寫申請，我們將於接獲申請之次日起1個工作天內檢視您的退貨要求，檢視完畢後將以E-mail回覆通知您，並將委託本公司指定之宅配公司，在5個工作天內透過電話與您連絡前往取回退貨商品。請您保持電話暢通，並備妥原商品及所有包裝及附件，以便於交付予本公司指定之宅配公司取回（宅配公司僅負責收件，退貨商品仍由特約廠商進行驗收），宅配公司取件後會提供簽收單據給您，請注意留存。
退回商品時，請以本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋），原封包裝後交付給前來取件的宅配公司；如果本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋）已經遺失，請您在商品原廠外盒之外，再以其他適當的包裝盒進行包裝，切勿任由宅配單直接粘貼在商品原廠外盒上或書寫文字。
若因您要求退貨或換貨、或因本公司無法接受您全部或部分之訂單、或因契約解除或失其效力，而需為您辦理退款事宜時，您同意本公司得代您處理發票或折讓單等相關法令所要求之單據，以利本公司為您辦理退款。
本公司收到您所提出的申請後，若經確認無誤，將依消費者保護法之相關規定，返還您已支付之對價（含信用卡交易），退款日當天會再發送E-mail通知函給您。

Vue.js 3前端測試入門從這裡開始：透過Vitest + Vue Test Utils實現自動化測試（iThome鐵人賽系列書）(軟精裝)

搜尋更多

內文簡介

相關分類