0人評分過此書

Vue.js 3前端測試入門從這裡開始:透過Vitest + Vue Test Utils實現自動化測試

出版日期
2023/10/06
閱讀格式
PDF
書籍分類
學科分類
ISBN
9786263336032

文化部計次

借閱規則
借閱天數 14
選擇分享方式

推薦本館採購書籍

您可以將喜歡的電子書推薦給圖書館,圖書館會參考讀者意見進行採購

讀者資料
圖書館 嘉義市政府文化局
* 姓名
* 身分
系所
* E-mail
※ 我們會寄送一份副本至您填寫的Email中
電話
※ 電話格式為 區碼+電話號碼(ex. 0229235151)/ 手機格式為 0900111111
* 請輸入驗證碼
前端測試就是快速精進前端程式碼的捷徑!
全台第一本高速有效的前端測試絕佳指南,學習前端測試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.1.1 手動測試中潛藏問題
      • 1.1.2 自動化測試
      • 1.1.3 自動化測試的好處
      • 1.1.4 自動化測試的難處
    • 1.2 撰寫測試時的脈絡
      • 1.2.1 撰寫測試的時機
      • 1.2.2 理解常見的前端測試類型
      • 1.2.3 組合不同的測試類型:測試金字塔(Testing Pyramid )
      • 1.2.4 挑選合適的測試工具(Test Tools )
      • 1.2.5 測試目標與方向
  • Chapter 02 設置測試環境
    • 2.1 安裝管理套件工具
      • 2.1.1 NVM 安裝方法
      • 2.1.2 NVM 常見指令
    • 2.2 安裝版控工具與複製專案
    • 2.3 瞭解測試環境設定檔
      • 2.3.1 設定測試設定檔
      • 2.3.2 測試設定常用欄位
  • Chapter 03 單元測試
    • 3.1 測試情境與測試案例
      • 3.1.1 測試情境與測試案例的相關語法
      • 3.1.2 有效的合併測試斷言
      • 3.1.3 測試案例中的 3A 模式
    • 3.2 準備(Setup)與拆遷(Teardown)
      • 3.2.1 Setup & Teardown 語法
      • 3.2.2 Setup & Teardown 的範疇
    • 3.3 斷言(Assertion )
      • 3.3.1 斷言風格(Assertion Style )
      • 3.3.2 Matcher 語法
  • Chapter 04 元件測試
    • 4.1 容器(Wrapper )
    • 4.2 容器方法(Wrapper Methods)
      • 4.2.1 選擇器(Selector )
      • 4.2.2 取得目標資訊
      • 4.2.3 模擬事件
    • 4.3 模擬元件
      • 4.3.1 data/setup
      • 4.3.2 Props
      • 4.3.3 Emits
      • 4.3.4 Provide/Inject
      • 4.3.5 Slot
      • 4.3.6 Custom Directives
  • Chapter 05 控制測試環境
    • 5.1 受測物與依賴物
    • 5.2 測試替身類型
      • 5.2.1 Dummy Value
      • 5.2.2 Test Stub
      • 5.2.3 Test Spy
      • 5.2.4 Mock Object
      • 5.2.5 Fake Object
    • 5.3 Vue Test Utils 中的測試替身
      • 5.3.1 shallowMount & shallow
      • 5.3.2 global.renderStubDefaultSlot
      • 5.3.3 global.stubs
      • 5.3.4 global.mocks
    • 5.4 Vitest 中的測試替身
      • 5.4.1 vi.spyOn( 物件記憶體位置, 物件方法名稱)
      • 5.4.2 vi.fn(callbackFunction)
      • 5.4.3 vi.mock
      • 5.4.4 MockInstance
      • 5.4.5 vi.stubGlobal
      • 5.4.6 模擬日期:Date
      • 5.4.7 模擬時間:Timer
  • Chapter 06 Vue Ecosystem
    • 6.1 Vue Router
      • 6.1.1 孤立型測試:使用模擬路由
      • 6.1.2 社交型測試:使用真實路由
    • 6.2 Pinia
      • 6.2.1 測試 store 本身的行為
      • 6.2.2 測試 store 與元件之間的互動
  • 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.5.1 快速(Fast )
      • 8.5.2 獨立(Independent )
      • 8.5.3 可重複(Repeatable )
      • 8.5.4 自我驗證(Self-Validating )
      • 8.5.5 即時(Timely )
    • 8.6 避免過度使用 Setup & Teardown API
  • Chapter 09 透過 GitHub Copilot 編寫測試程式碼
    • 9.1 前置準備
      • 9.1.1 訂閱服務
      • 9.1.2 安裝 Copilot 擴充工具
      • 9.1.3 在編輯器中的基本操作
      • 9.1.4 Copilot 情境來源
    • 9.2 實際應用於測試程式碼
      • 9.2.1 引導
      • 9.2.2 缺點與限制

評分與評論

請登入後再留言與評分
幫助
您好,請問需要甚麼幫助呢?
使用指南

客服專線:0800-000-747

服務時間:週一至週五 AM 09:00~PM 06:00

loading