前端測試金字塔使用步驟詳解

這次帶給大家前端測試金字塔使用步驟詳解，前端測試金字塔使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

測試金字塔，來自人們將多層結構應用在前端測試領域（如圖1）。

對於金字塔的結構眾說紛紜，這裡採用原作者的觀點，並附上一些我在實際專案中所採用的技術堆疊：

• 端對端測試：從外部測試整個app。在真實的瀏覽器或行動裝置上運行應用，使用真實的服務端資料。通常情況下，端到端測試都是由組內的專門測試人員進行的（人力測試），此時的app也大都處於生產階段或者準生產階段，所用數據都是線上真實數據。

• UI自動化測試：從外部測試app的主要模組。一般運行在真是的設備上，使用模擬伺服器。前端自動化測試框架很多，這裡有一個連結：Top 5 Most Rated Node.js Frameworks for End-to-End Web Testing。 CasperJS在渲染React DOM時會有些問題，Protractor是基於Angluar的，配置起來也有些麻煩，所以我在專案中使用了nightmare.js，他會呼叫eletron虛擬出的瀏覽器進行自動化測試，並且在專案中我們使用了一個特定進行測試的資料庫。

• 元件測試：從內部和UI和業務邏輯整合的測試。通常在node上運行，使用模擬伺服器。在我們的專案中，由於使用了facebook的CRA(create react app)，自帶了Jest，自帶斷言庫，開箱即用很方便，所以採用了Jest Enzyme進行組件測試。基本教學網路上很多，也可以在Jest和Enzyme的官網上看，有翻譯版本。

• 單元測試：拋開UI，將專案分割成若干的單元，進行業務邏輯的測試。使用Node運行，並且在每個單元外使用模擬資料。

下面主要說一下元件和單元測試：

由於是基於react redux saga的單頁應用，每個頁面，或者說元件的基本結構分為四個部分：sagas儲存業務邏輯，index囊括了相關的action和reducer，component只進行UI渲染，container負責連結store和component。所以我採用的測試方案如下：

• sagas: 使用redux-saga-test-plan，模擬generate function，使用模擬資料進行測試，並且使用provider模擬http請求的資料、 withReducer同時測試相關的selector、reducer和actions。

• container：使用redux-mock-store模擬redux store以及對應的action和state dispatch匹配測試。

• component: 使用enzyme的shallow和mock props渲染元件（如果是最底層的元件可以用mount來測試react元件的生命週期），使用jest的mock function模擬點擊等的動作。

• index：index主要部分已經在sagas和container部分測試過了，詳細的測試（我覺得必要性不是很大）可以參考redux的官方測試文件。

在國內一般的開發團隊都有專門的測試人員，但是在國外比較小的團隊就不會有。所以在開發同時不斷更新測試程式碼也是很有必要的。

這是幾個月來在測試方面的一些個人理解，如有不對或不夠細緻的地方還請大家指正。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Webpack載入模組有哪些方法

小程式儲存圖片分享到朋友圈功能實作

以上是前端測試金字塔使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！