歡迎加入學習測試！

本課程將介紹及探索如何測試網頁版。

在本課程中，您將瞭解以下內容：

本課程也提供了簡要實用的程式碼範例，協助您學習新知。

本課程範圍包括 JavaScript、前端的文件模型，以及後端的程式庫測試，並在 Node.js 等環境中執行。此範例在測試中假設沒有背景資料，但您需要使用 JavaScript 基準，並具備 Node.js 或類似經驗。這項工具適合新手和經驗豐富的開發人員

由於大多數的測試架構和工具都共用通用語言，因此學習測試是一般的測試方式。為必須具體明確，我們將使用 Vitest 這個測試架構 (日益增長的熱門程度)，並示範如何使用 React 或 Lit 編寫網頁元件。如要進一步瞭解這項選擇，請參閱附錄。

您可以從頭開始進行本課程，但也能將之做為特定主題的參考資料。在適用情況下，課程會連結至相關資源。

課程內容如下：

開始測試

這是測試的概略說明，其中包含在 JavaScript 中測試的實用範例。其中也包含每項測試的規模簡介。

測試有助於提高工作效率及編寫軟體，雖然使用指令列手動執行，但您也能將測試當做自動化程序或建構系統的一部分來執行。

Node 等執行階段工具適用於一般用途的程式碼，而瀏覽器的測試程式碼可在模擬環境中執行，或者使用專為瀏覽器測試設計的架構。

瞭解測試類型的常見分類，這些分類通常對應至其規模。重要的是，測試類型沒有嚴格的定義，因此會隨您的需求而改變。

找出程式碼集最重要的部分來套用嚴謹的測試，是個難以做出的決定。本單元將介紹測試作業的概念，以及如何評估程式碼以進行測試。

在本練習中，您將瞭解如何測試不理想的 React 元件。Vitest 透過三個不同的範例進行：攔截使用 fetch() 產生的網路流量、模擬外部依附元件，以及使用 React 的 Context 提供測試專用的自訂程式碼部分。

雖然使用 TypeScript 和 ESLint 等工具，卻沒有完善的測試方法，可以提供一種自動檢查機制。本單元將探討這些替代工具。

瞭解大部分測試程式庫或架構 (包括 test() 和 assert) 常用的基本功能，這些是每次以 JavaScript 編寫的測試的主要項目。

本節的其餘部分將提供更多關於測試架構和程式庫的頁面、測試架構和程式庫的使用方式，以及如何決定要使用的工具和其他工具。

您將學習相關模式，以便應對一些常見的網路測試挑戰。

本節將示範如何測試使用 Next.js 建構的電子商務網站，包括可自行檢查及學習的程式碼。您將瞭解如何測試元件、如何使用外部服務 (包括付款) 進行測試，以及如何為具有選擇性登入頁面的網站建構端對端測試。

測試可能是工程的難題，但對開發團隊來說，要測試哪些項目、由誰負責，又是最佳做法也是一大挑戰。

本課程說明如何測試現有程式碼，但您的團隊可以採用多種模式，讓程式碼更易於測試。本節將說明部分方法。