React項目的UI測試

原文連接：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的官方測試文檔。

在國內通常的開發團隊都有專門的測試人員，可是在國外比較小的團隊就不會有。因此在開發同時不斷更新測試代碼也是頗有必要的。

這是幾個月來在測試方面的一些我的理解，若有不對或不夠細緻的地方還請你們指正。