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

在國內平常的開闢團隊都有特地的測試職員，然則在國外比較小的團隊就不會有。所以在開闢同時不斷更新測試代碼也是很有必要的。

這是幾個月來在測試方面的一些個人明白，若有不對或不夠仔細的處所還請人人斧正。