前端開發測試入門｜現在知道也還不遲的自動化測試策略必備知識 フロントエンド開発のためのテスト入門

前言
本書適用對象
本書軟體執行環境


第 1 章　測試的目的與障礙
　1-1本書的內容編排
　1-2 寫測試的目的
　1-3 寫測試的障礙

第 2 章　測試方法與測試策略
　2-1 以範圍與目的來思考測試
　2-2 前端測試的範圍
　2-3 前端測試的目的
　2-4 測試策略模型
　2-5 測試策略計畫

第 3 章　單元測試入門
　3-1 建構環境
　3-2 組成測試的元素
　3-3 實施測試的方法
　3-4 條件判斷
　3-5 臨界值與例外處理
　3-6 比對器
　3-7 非同步測試　

第 4 章　模擬（Mock）
　4-1 模擬的目的
　4-2 運用模擬模組的 Stub
　4-3 Web API 的模擬基礎
　4-4 Web API 模擬生成函式
　4-5 使用模擬函式的 Spy
　4-6 Web API 的細部模擬
　4-7 依賴當前時間的測試　

第 5 章 UI　元件測試
　5-1 UI 元件基本知識
　5-2 安裝需要的函式庫
　5-3 開始 UI 元件測試
　5-4 項目清單 UI 元件測試
　5-5 互動式 UI 元件測試
　5-6 使用公用函式進行測試
　5-7 含有非同步處理的 UI 元件測試
　5-8 UI 元件的快照測試（snapshot testing）
　5-9 原生角色與無障礙名稱（accessible name）

第 6 章　怎麼看程式碼覆蓋率報告（Coverage Report）
　6-1 程式碼覆蓋率報告簡介
　6-2 怎麼解讀程式碼覆蓋率報告
　6-3 選擇喜歡的報表產生器

第 7 章　Web 應用程式整合測試
　7-1 Next.js 應用程式開發與整合測試
　7-2 React Context 整合測試
　7-3 Next.js Router 的畫面顯示整合測試
　7-4 Next.js Router 系統操作整合測試
　7-5 使用React Hook Form 讓表單更好操作
　7-6 表單驗證測試
　7-7 模擬 Web API 回應的 MSW（Mock Service Worker）
　7-8 Web API 整合測試
　7-9 圖片上傳整合測試　


第 8 章　UI 元件總管
　8-1 Storybook 基本介紹
　8-2 Storybook 必要的附加元件（Add-on）
　8-3 註冊依賴 Context API 的 Story
　8-4 註冊依賴 Web API 的 Story
　8-5 註冊依賴 Next.js Router 的 Story
　8-6 用 Play function 進行互動測試
　8-7 運用 addon-a11y 進行無障礙性測試
　8-8 Storybook 的測試執行器
　8-9 將 Story 作為整合測試加以運用　

第 9 章　視覺回歸測試
　9-1 為什麼需要視覺回歸測試
　9-2 使用 reg-cli 比較圖片
　9-3 導入 Storycap
　9-4 導入 reg-suit
　9-5 準備外部儲存服務
　9-6 讓 reg-suit 與 GitHub Actions 連動
　9-7 運用視覺回歸測試來積極進行重構

第 10 章　E2E 測試
　10-1 E2E測試簡介
　10-2 Playwright 的安裝與基本講解
　10-3 簡介測試目標的應用程式
　10-4 在開發環境中執行E2E測試
　10-5 簡介 Prisma 以及如何準備測試
　10-6 登入功能的 E2E 測試
　10-7 個人資訊功能的 E2E 測試
　10-8 使用 E2E 測試確認按讚（Like） 功能
　10-9 建立新文章頁面的 E2E 測試
　10-10 文章編輯頁面的 E2E 測試
　10-11 文章清單頁面的 E2E 測試
　10-12 面對 Flaky 測試

結語
索引


附錄 A　使用 GitHub Actios執行 UI 元件測試（PDF 電子書，請線上下載）
附錄 B　使用 GitHub Actios 執行 E2E 測試（PDF 電子書，請線上下載）