資訊專欄INFORMATION COLUMN
摘要：單元測試相關(guān)詞條白盒測試，拋開，將項(xiàng)目分割成若干的單元，進(jìn)行業(yè)務(wù)邏輯的測試。下面主要說一下組件和單元測試由于是基于的單頁應(yīng)用，每個(gè)頁面，或者說組件的基本結(jié)構(gòu)分為四部分儲存業(yè)務(wù)邏輯，囊括了相關(guān)的和，只進(jìn)行渲染，負(fù)責(zé)鏈接和。
原文鏈接：Redux Testing Step by Step: A Simple Methodology for Testing Business Logic
測試金字塔，來源于人們將多層結(jié)構(gòu)應(yīng)用在前端測試領(lǐng)域（如圖1）。
對于金字塔的結(jié)構(gòu)眾說紛紜，這里采用原作者的觀點(diǎn)，并附上一些我在實(shí)際項(xiàng)目中所采用的技術(shù)棧以及結(jié)合一些已有的測試概念：
端到端測試：從外部測試整個(gè)app。在真實(shí)的瀏覽器或移動(dòng)設(shè)備上運(yùn)行應(yīng)用，使用真實(shí)的服務(wù)端數(shù)據(jù)。通常情況下，端到端測試都是由組內(nèi)的專門測試人員進(jìn)行的（人力測試），此時(shí)的app也大都處于生產(chǎn)階段或者準(zhǔn)生產(chǎn)階段，所用數(shù)據(jù)都是線上真實(shí)數(shù)據(jù)。
UI自動(dòng)化測試：（相關(guān)詞條： 冒煙測試，黑盒測試，回歸測試，集成測試，BDD）從外部測試app的主要模塊。一般運(yùn)行在真是的設(shè)備上，使用模擬服務(wù)器。前端自動(dòng)化測試框架很多，這里有一個(gè)鏈接：Top 5 Most Rated Node.js Frameworks for End-to-End Web Testing。CasperJS在渲染React DOM時(shí)會(huì)有些問題，Protractor是基于Angluar的，配置起來也有些麻煩，所以我在項(xiàng)目中使用了nightmare.js，他會(huì)調(diào)用eletron虛擬出的瀏覽器進(jìn)行自動(dòng)化測試，并且在項(xiàng)目中我們使用了一個(gè)特定進(jìn)行測試的數(shù)據(jù)庫。
組件測試：從內(nèi)部和UI和業(yè)務(wù)邏輯集成的測試。通常在node上運(yùn)行，使用模擬服務(wù)器。在我們的項(xiàng)目中，由于使用了facebook的CRA(create react app)，自帶了Jest，自帶斷言庫，開箱即用很方便，所以采用了Jest+Enzyme進(jìn)行組件測試?；窘坛叹W(wǎng)上很多，也可以在Jest和Enzyme的官網(wǎng)上看，有翻譯版本。
單元測試：（相關(guān)詞條： 白盒測試，TDD）拋開UI，將項(xiàng)目分割成若干的單元，進(jìn)行業(yè)務(wù)邏輯的測試。使用Node運(yùn)行，并且在每個(gè)單元外使用模擬數(shù)據(jù)。
下面主要說一下組件和單元測試：
由于是基于react+redux+saga的單頁應(yīng)用，每個(gè)頁面，或者說組件的基本結(jié)構(gòu)分為四部分：sagas儲存業(yè)務(wù)邏輯，index囊括了相關(guān)的action和reducer，component只進(jìn)行UI渲染，container負(fù)責(zé)鏈接store和component。所以我采用的測試方案如下：
sagas: 使用redux-saga-test-plan，模擬generate function，使用模擬數(shù)據(jù)進(jìn)行測試，并且使用provider模擬http請求的數(shù)據(jù)、withReducer同時(shí)測試相關(guān)的selector、reducer和actions。
container：使用redux-mock-store模擬redux store以及相應(yīng)的action和state dispatch匹配測試。
component: 使用enzyme的shallow和mock props渲染組件（如果是最底層的組件可以用mount來測試react組件的生命周期），使用jest的mock function模擬點(diǎn)擊等的動(dòng)作。
index：index主要部分已經(jīng)在sagas和container部分測試過了，詳細(xì)的測試（我覺得必要性不是很大）可以參考redux的官方測試文檔。
在國內(nèi)一般的開發(fā)團(tuán)隊(duì)都有專門的測試人員，但是在國外比較小的團(tuán)隊(duì)就不會(huì)有。所以在開發(fā)同時(shí)不斷更新測試代碼也是很有必要的。
這是幾個(gè)月來在測試方面的一些個(gè)人理解，如有不對或不夠細(xì)致的地方還請大家指正。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/8814.html
摘要：單元測試相關(guān)詞條白盒測試，拋開，將項(xiàng)目分割成若干的單元，進(jìn)行業(yè)務(wù)邏輯的測試。下面主要說一下組件和單元測試由于是基于的單頁應(yīng)用，每個(gè)頁面，或者說組件的基本結(jié)構(gòu)分為四部分儲存業(yè)務(wù)邏輯，囊括了相關(guān)的和，只進(jìn)行渲染，負(fù)責(zé)鏈接和。 原文鏈接：Redux Testing Step by Step: A Simple Methodology for Testing Business Logic 測試...
摘要：更多參考通過庫掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁面應(yīng)用中頁面的組件頁面的組件頁面的組件只有真正要實(shí)例化當(dāng)前頁面的時(shí)候，才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 React 基礎(chǔ)知識的文章，需要熟悉 React 相關(guān)知識 主架構(gòu)：react, react-router, redux, redux...
摘要：更多參考通過庫掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁面應(yīng)用中頁面的組件頁面的組件頁面的組件只有真正要實(shí)例化當(dāng)前頁面的時(shí)候，才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 React 基礎(chǔ)知識的文章，需要熟悉 React 相關(guān)知識 主架構(gòu)：react, react-router, redux, redux...
摘要：也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁的項(xiàng)目上到處使用一個(gè)可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目 整理與收集的一些比較優(yōu)秀github項(xiàng)目，方便自己閱讀，順便分享出來，大家一起學(xué)習(xí)，本篇文章會(huì)持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...
閱讀 5739·2021-11-24 10:25
閱讀 2689·2021-11-16 11:44
閱讀 3843·2021-10-11 11:09
閱讀 3172·2021-09-02 15:41
閱讀 3256·2019-08-30 14:14
閱讀 2271·2019-08-29 14:10
閱讀 2345·2019-08-29 11:03
閱讀 1125·2019-08-26 13:47
