資訊專欄INFORMATION COLUMN
摘要：單元測試相關詞條白盒測試，拋開，將項目分割成若干的單元，進行業務邏輯的測試。下面主要說一下組件和單元測試由于是基于的單頁應用，每個頁面，或者說組件的基本結構分為四部分儲存業務邏輯，囊括了相關的和，只進行渲染，負責鏈接和。
原文鏈接：Redux Testing Step by Step: A Simple Methodology for Testing Business Logic
測試金字塔，來源于人們將多層結構應用在前端測試領域（如圖1）。
對于金字塔的結構眾說紛紜，這里采用原作者的觀點，并附上一些我在實際項目中所采用的技術棧以及結合一些已有的測試概念：
端到端測試：從外部測試整個app。在真實的瀏覽器或移動設備上運行應用，使用真實的服務端數據。通常情況下，端到端測試都是由組內的專門測試人員進行的（人力測試），此時的app也大都處于生產階段或者準生產階段，所用數據都是線上真實數據。
UI自動化測試：（相關詞條： 冒煙測試，黑盒測試，回歸測試，集成測試，BDD）從外部測試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的官網上看，有翻譯版本。
單元測試：（相關詞條： 白盒測試，TDD）拋開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的官方測試文檔。
在國內一般的開發團隊都有專門的測試人員，但是在國外比較小的團隊就不會有。所以在開發同時不斷更新測試代碼也是很有必要的。
這是幾個月來在測試方面的一些個人理解，如有不對或不夠細致的地方還請大家指正。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95259.html
摘要：單元測試相關詞條白盒測試，拋開，將項目分割成若干的單元，進行業務邏輯的測試。下面主要說一下組件和單元測試由于是基于的單頁應用，每個頁面，或者說組件的基本結構分為四部分儲存業務邏輯，囊括了相關的和，只進行渲染，負責鏈接和。 原文鏈接：Redux Testing Step by Step: A Simple Methodology for Testing Business Logic 測試...
摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識 主架構：react, react-router, redux, redux...
摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識 主架構：react, react-router, redux, redux...
摘要：也是一款優秀的響應式框架站點所使用的一套框架為微信服務量身設計的一套框架一組很小的，響應式的組件，你可以在網頁的項目上到處使用一個可定制的文件，使瀏覽器呈現的所有元素，更一致和符合現代標準。 GitHub 值得收藏的前端項目 整理與收集的一些比較優秀github項目，方便自己閱讀，順便分享出來，大家一起學習，本篇文章會持續更新，版權歸原作者所有。歡迎github star與fork 預...
閱讀 1164·2021-11-22 15:24
閱讀 4440·2021-09-23 11:51
閱讀 2302·2021-09-08 09:36
閱讀 3514·2019-08-30 15:43
閱讀 1295·2019-08-30 13:01
閱讀 1116·2019-08-30 12:48
閱讀 530·2019-08-29 12:52
閱讀 3366·2019-08-29 12:41
