首頁 web前端 js教程 前端測試金字塔使用步驟詳解

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

May 25, 2018 am 11:29 AM
使用 步驟 金字塔

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

測試金字塔,來自人們將多層結構應用在前端測試領域(如圖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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在iPhone中使Google地圖成為預設地圖 如何在iPhone中使Google地圖成為預設地圖 Apr 17, 2024 pm 07:34 PM

如何在iPhone中使Google地圖成為預設地圖

此 Apple ID 尚未在 iTunes Store 中使用:修復 此 Apple ID 尚未在 iTunes Store 中使用:修復 Jun 10, 2024 pm 05:42 PM

此 Apple ID 尚未在 iTunes Store 中使用:修復

升級微信最新版本的步驟(輕鬆掌握微信最新版本的升級方法) 升級微信最新版本的步驟(輕鬆掌握微信最新版本的升級方法) Jun 01, 2024 pm 10:24 PM

升級微信最新版本的步驟(輕鬆掌握微信最新版本的升級方法)

crystaldiskmark是什麼軟體? -crystaldiskmark如何使用? crystaldiskmark是什麼軟體? -crystaldiskmark如何使用? Mar 18, 2024 pm 02:58 PM

crystaldiskmark是什麼軟體? -crystaldiskmark如何使用?

iPhone上的Safari縮小問題:這是修復程序 iPhone上的Safari縮小問題:這是修復程序 Apr 20, 2024 am 08:08 AM

iPhone上的Safari縮小問題:這是修復程序

Shazam應用程式在iPhone中無法運作:修復 Shazam應用程式在iPhone中無法運作:修復 Jun 08, 2024 pm 12:36 PM

Shazam應用程式在iPhone中無法運作:修復

iPhone螢幕截圖不起作用:如何修復 iPhone螢幕截圖不起作用:如何修復 May 03, 2024 pm 09:16 PM

iPhone螢幕截圖不起作用:如何修復

foob​​ar2000怎麼下載? -foobar2000怎麼使用 foob​​ar2000怎麼下載? -foobar2000怎麼使用 Mar 18, 2024 am 10:58 AM

foob​​ar2000怎麼下載? -foobar2000怎麼使用

See all articles