要進入寫測試之前呀~我們必須要先了解為什麼要寫測試，及我們會說明一種測試的開發方法(TDD)

寫測試主要是用來保護我們的程式碼而且可以有效的降低BUG出現的機率!

上面說到的TDD，全名又叫作 => Test-Driven Development (參考小菜鳥畫的簡易圖 ↓ )

步驟: 定義規格 ->開發軟體

• 主要是避免開發者不寫TEST CODE的狀況

• 有較低的BUG比率

• 避免過度設計

前端的測試方法大致上又分為三種 (UI測試、集成測試、單元測試)

再參考小菜鳥畫的一張簡易圖 ↓

• Unit Test (單元測試) : 通常是用來測試一個function (比較有指標性及模塊化 => 也就是範圍小，好控制的意思啦~)
• Integration Test (集成測試) : 讓幾個單元合在一起作測試 (有時候互相影響的幾個function，就可以用這種類型的測試方法)
• E2E Test (End-to-end) : 模擬使用者和APP的互相影響

以上是三種比較常見測試方法及一種測試開發方法的介紹~

接下來要介紹我們的主角 Jest了 ! 前面有提到說 Jest 是一種測試框架 ，
當然~還有其他的測試框架，只是因為Jest和React的整合度比較高，
所以很多React的開發者都建議使用Jest

Jest

• 是FB開發出的一個測試框架
• 優點是比其他框架還多了內建的測試工具
• 還有一個優點是只執行有更動程式碼的function的測試 => 提高測試速度
• 可以透過npm 或是 yarn 來安裝 (往後的介紹會使用npm來安裝)

除了了解框架以外，我們還要了解所要使用的測試工具庫 => Enzyme

Enzyme

• 是開源程式碼 => Airbnb 開發出來的

• 是透過官方的測試庫工具(ReactTestUtils)進行二次封裝，所衍生出來強大的API

• 優點

  • 可以為測試建立虛擬的DOM且可以透過Jquery的方式來對DOM進行處理
  • 允許測試可以不用經由瀏覽器
  • 可以模擬單一個事件
  • 有兩個渲染方式 Shallow Rendering 和 Mount Rendering (後續我們會用到的是Shallow Rendering，這邊先不細講，後續有機會再來補充~)
  • 可以操作 Props 和 States
  • 可以檢查 Props 和 States

介紹完了測試的基本概念及我們要使用的框架和工具，
下一篇我們要正式建立一個React專案並安裝Jest和Enzyme來完整我們的測試囉!

一步一步跟著小菜鳥往前吧~ GOGOGO !!