目錄

• 為什么要撰寫前端的測試？
• 前端測試的類型
• 技術選型
• 結構介紹

為什么要撰寫前端的測試？

在前端發展日益壯大后，我們在項目中往往引入了工程化、模塊化的概念，這和數年前前端極度依賴后端渲染以及切圖工作產生了極大的進步，當然這些進步也使得我們的項目變得更加復雜龐大，并且在項目中使用了SPA的應用概念，每個工程的復雜化、代碼的高復用性要求和前端代碼模塊之間的高內聚低耦合的需求，前端工程中的單元測試流程就顯得很有其必要。
我們需要明確單元測試存在的必要性，這項技術是為了使得我們不僅僅可以通過自定義的測試用例來測試我們已經寫好的功能，更加長久持續的意義在于我們在組件中增刪改操作后可以保證我們原先被測試覆蓋到的功能可以不受影響，這更有利于降低測試人員的壓力，提高測試的效率，可以避免在項目迭代后需要測試人員重新重復測試前幾個版本反復測試過的功能。并且在項目復雜度過高后，”人肉測試“這種方式更加容易出現疏漏，漏測一些必要的功能或細節。

前端測試的類型

由于前端的特殊性，我們往往不同于后端通過檢測一個方法或模塊的輸入和輸出就可以依賴去撰寫一個具有目的性的測試用例。在引入了新式框架Vue、React或Angular后，我們對于組件化的運用越來越多，在改變了組件的狀態后往往會觸發DOM的更新，所以前端因此衍生出兩種測試方式。

• 單元測試 （unit testing）
  單元測試對應為白盒測試
  首先我們需要明確的是什么是單元測試？首先我們假設我們的項目是一個SPA項目，也就是說我們的項目中都是由組件來組成的，在這里提倡的單元測試即為對一個單一的組件進行封閉的測試。為什么說是一個”封閉“的，是因為我們的組件中可能去調用別的工具函數或是會觸發別的組件的顯示和隱藏，在這里是不在單個測試集合的測試范圍中的，我們所需要測試的只是一個組件中自身的邏輯和DOM的反饋狀態，不需要去考慮別的組件或是工具函數的影響。這樣可以最大程度的降低測試用例的耦合度，使用例專注測試組件中的某個具體的功能。
  同時保留了白盒測試的特性，在引入了vue-test-utils后，我們可以更方便地更改和監聽組件本身的props和data（或state）來確定數據的流動和更改，保證整個流程中數據的正確性，并且在異步這類操作的機制下，可以通過單元測試更好地判斷各時間點數據是否達到預期。
• E2E測試（end to end）
  端到端測試則對應的為黑盒測試，即只測試輸入輸出，不考慮過程狀態的測試方式，在前端中這種測試方式最簡單直白的方式的就是通過一個trigger去觸發一個DOM事件，然后通過斷言判斷頁面中的DOM是否符合預期中的更新，很簡單很粗暴的方式，當然這種編寫的方式相對于單元測試難度也會降低不少，所以在技術足夠成熟并且在團隊足夠強壯時可以交給測試人員去撰寫。

技術選型

• 項目框架： Vue
  在項目中選用的為Vue框架，所以這一系列也會以Vue框架為主作為一個切入點，這點在和其他框架的測試用例撰寫上會有一定的出入，所以在Vue中也有一個專用的輔助測試工具為vue-test-unils，這個工具會在接下來的教程中演示。
  本系列中會采用最新的vue-cli 3.0來構造整個項目，所以在項目構造中會直接選擇各類的需要框架，所以不會演示具體的插件的安裝過程。
• 單元測試框架： Jest
  在vue-cli 3.0中提供了兩種單元測試選型供我們選擇，一種為mocha + chai組合，另一種為facebook出品的Jest框架，在接下來的單元測試專題中會講解為什么這里選用了Jest框架。
• E2E測試框架： Cypress
  同樣的在腳手架中也提供了兩種E2E測試所依賴的框架，分別為Nightwatch和Cypress，這里我們選用更新的Cypress，本系列也會著重講解這款框架API的使用。

結構介紹

在測試中大體寫法為一個測試套件describe中包含一個或多個測試用例it或test，在一個測試的集合中也就是一個測試文件中可以有多個測試套件，每一個測試套件和用例都有自己的描述，我們應該在針對一個組件建立一個測試文件，在文件中對應一個或多個desscribe來測試不同類型的功能，然后在一個測試套件中再詳細地撰寫每一個測試用例的具體測試函數或DOM變化。在一個測試套件中通常測試框架都會提供針對測試用例的自己的生命周期，不同的框架提供的語法可能會有一定的差異，不過可以大致分成四個生命周期，這里我們以單元測試的Jest為例：

• beforeEach 在每個測試用例之前運行
• beforeAll 在所有測試用例之前運行
• afterEach 在每個測試用例之后運行
• afterAll 在所有測試用例之后運行

總結

以上是生活随笔為你收集整理的前端测试 —— 技术选型及入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。