本課程將介紹及探索如何測試網頁版。
在本課程中,您將瞭解以下內容:
- 測試基礎知識
- 自動與手動測試
- 執行測試的位置與方式
- 最佳做法
- 測試的理念,包括要測試的內容、負責人,以及如何考慮測試特定方式,而非單純測試。
本課程也提供了簡要實用的程式碼範例,協助您學習新知。
本課程範圍包括 JavaScript、前端的文件模型,以及後端的程式庫測試,並在 Node.js 等環境中執行。此範例在測試中假設沒有背景資料,但您需要使用 JavaScript 基準,並具備 Node.js 或類似經驗。這項工具適合新手和經驗豐富的開發人員
由於大多數的測試架構和工具都共用通用語言,因此學習測試是一般的測試方式。為必須具體明確,我們將使用 Vitest 這個測試架構 (日益增長的熱門程度),並示範如何使用 React 或 Lit 編寫網頁元件。如要進一步瞭解這項選擇,請參閱附錄。
您可以從頭開始進行本課程,但也能將之做為特定主題的參考資料。在適用情況下,課程會連結至相關資源。
課程內容如下:
開始測試
什麼是測試?
這是測試的概略說明,其中包含在 JavaScript 中測試的實用範例。其中也包含每項測試的規模簡介。
測試執行位置
測試有助於提高工作效率及編寫軟體,雖然使用指令列手動執行,但您也能將測試當做自動化程序或建構系統的一部分來執行。
測試環境
Node 等執行階段工具適用於一般用途的程式碼,而瀏覽器的測試程式碼可在模擬環境中執行,或者使用專為瀏覽器測試設計的架構。
自動化測試類型
瞭解測試類型的常見分類,這些分類通常對應至其規模。重要的是,測試類型沒有嚴格的定義,因此會隨您的需求而改變。
要測試的項目和做法
找出程式碼集最重要的部分來套用嚴謹的測試,是個難以做出的決定。本單元將介紹測試作業的概念,以及如何評估程式碼以進行測試。
元件測試實務
在本練習中,您將瞭解如何測試不理想的 React 元件。Vitest 透過三個不同的範例進行:攔截使用 fetch()
產生的網路流量、模擬外部依附元件,以及使用 React 的 Context
提供測試專用的自訂程式碼部分。
靜態分析
雖然使用 TypeScript 和 ESLint 等工具,卻沒有完善的測試方法,可以提供一種自動檢查機制。本單元將探討這些替代工具。
斷言和其他基元
交易工具
瞭解大部分測試程式庫或架構 (包括 test()
和 assert
) 常用的基本功能,這些是每次以 JavaScript 編寫的測試的主要項目。
即將推出
- 避免常見測試錯誤
- 測試替身
- 測試程式庫和公用程式
- 決定測試架構
本節的其餘部分將提供更多關於測試架構和程式庫的頁面、測試架構和程式庫的使用方式,以及如何決定要使用的工具和其他工具。
即將推出:問題導向的測試
您將學習相關模式,以便應對一些常見的網路測試挑戰。
即將推出:自動化測試實際運作
本節將示範如何測試使用 Next.js 建構的電子商務網站,包括可自行檢查及學習的程式碼。您將瞭解如何測試元件、如何使用外部服務 (包括付款) 進行測試,以及如何為具有選擇性登入頁面的網站建構端對端測試。
即將推出:測試的原理
測試可能是工程的難題,但對開發團隊來說,要測試哪些項目、由誰負責,又是最佳做法也是一大挑戰。
即將推出:撰寫可測試的程式碼
本課程說明如何測試現有程式碼,但您的團隊可以採用多種模式,讓程式碼更易於測試。本節將說明部分方法。