歡迎加入學習測試!

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

在本課程中,您將瞭解以下內容:

  • 測試基礎知識
  • 自動與手動測試
  • 執行測試的位置與方式
  • 最佳做法
  • 測試的理念,包括要測試的內容、負責人,以及如何考慮測試特定方式,而非單純測試。

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

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

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

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

課程內容如下:

開始測試

什麼是測試?

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

測試執行位置

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

測試環境

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

自動化測試類型

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

要測試的項目和做法

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

元件測試實務

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

靜態分析

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

斷言和其他基元

交易工具

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

即將推出

  • 避免常見測試錯誤
  • 測試替身
  • 測試程式庫和公用程式
  • 決定測試架構

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

即將推出:問題導向的測試

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

即將推出:自動化測試實際運作

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

即將推出:測試的原理

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

即將推出:撰寫可測試的程式碼

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