探索----面向單元測試編寫React組件

繼上一篇年輕時，我不寫單元測試文章事後，咱們開始在項目中引入了單元測試，但願可以經過單元測試提早發現問題，可是在實施中咱們遇到了一個比較嚴重的問題：

複雜React組件的單元測試編寫難度太大，致使你們不肯意編寫單元測試

爲了解決這個問題，咱們作了積極的探索，首先，咱們迴歸到咱們引入單元測試的本質

但願單元測試解決什麼問題？

• 面對複雜的業務場景，共用模塊間不免會相互影響，但願用單元測試來覆蓋原有邏輯，從而保證引入新邏輯，原有模塊依然可以表現正常。

這時咱們從目標結果反推方式，會發現咱們偏移了咱們的目標，咱們並不但願界面上的ui也包含在咱們的單元測試中，頁面上ui交互的操做，應該是咱們自測過程當中，就可以本身發現的問題，而單元測試應該專一於邏輯的測試。基於這樣的定位，咱們回過頭來，再來從新看咱們的業務代碼，就須要探索出一種新的React組件模式。

最終，咱們借鑑了分層思想來去設計咱們的React組件

咱們將一個React組件，分紅了UI交互層和邏輯處理層兩部分

• UI交互層專一於交互以及UI的正常展現
• 邏輯處理層包括了一個一個的邏輯單元模塊，去處理不一樣的業務邏輯，
  利用純函數的思想，去保證輸入和輸出的可控

經過這樣的分層設計，咱們將react中業務邏輯相關拆分出來，針對這樣的一個一個單元模塊，咱們在編寫相對應的測試用例，極大的下降了編寫一個複雜組件的單元測試的成本。