Is Jest and Enzyme matching?
前言：開始研究前端測試大約兩週時間，因為目前開發平台技術主要使用 React ，因此選擇旗下的測試框架 Jest，在接觸 Jest 之前並沒有寫過任何測試的經驗，換句話說，本次學習也算是我的前端測試初體驗．
我的學習方式除了跟隨官網的文件實作外，會看大量別人寫的心得文，加速了解整個大局觀，但是發現大部分文章除了介紹基本語法外，很少有寫的比較深入的，我個人就非常好奇為什麼文章搜尋結果都是 Jest with Enzyme 搭配來做 React 測試，總要有個理由說服眾生呀，經過閱讀、學習、沈澱消化後，以下做個重點整理：
- Jest ，幫我們統整了很多小東西，斷言庫、節點快照、假函式、分析測試程式碼覆蓋率、測試結果的呈現，而且它本身在 create react app 時就包含在裡面，便可以直接使用．
- 測試 React 功能面可分為兩大點：
節點快照：可以清楚看到 rendor 後實際的節點狀態．
DOM 測試：這一個部分很重要！！當我們想要針對元件的狀態、函式、props、進行操作或是斷言，就要去撰寫 DOM 測試．但是在這一個部分是 Jest 比較弱的一環，它本身並沒有提供 API 去實作 DOM 測試，因此官方建議使用 react-testing-library 、Enzyme 或是 React’s TestUtils ． - Enzyme，這個單字中文可翻為酵素，而且發音不太好發，讓人看了會卻步，但是不要怕，既然它是酵素就代表有著很強大的力量可以幫助我們分解元件，舉凡元件中的大大小小的你想得的地方，我們都可以藉由它來操作進行測試，想要模擬點擊事件，沒問題！想要遍歷元件中的節點，沒問題！想要節點快照，請再安裝一個 enzyme-to-json 套件，沒問題！
但 Enzyme 也不是神，它並沒有斷言庫，也沒有提供假函式給我們使用，看到這裡有感應出一點點訊息了嗎？Enzyme 主要是用來進行 React DOM 測試，並沒有整合其他附屬的小東西，所以需要 Jest 來相輔相成，達到互補的概念．
那我們來省思一下，為什麼 Jest 不把通用的 DOM 測試整合包合併在一起呢？ 我想 Jest 已經把很多小東西都整合在一起了，如果在合併 DOM 測試包，會過於肥大，所以才拆開來．
如果只進行節點快照可行嗎？，答案是不夠精準，快照只是用來提供肉眼觀察實際的節點和狀態是否正確，不過很多複雜的情境很難用快照看出端倪，所以才需要 DOM 測試．
那為什麼要選用 Enzyme 而不選用官方的 React’s TestUtils，最大的差別當然是酵素是比較強大的，分解能力非凡！個人就非常喜愛 Enzyme 的遍歷元件節點的功能，語法和 jquery 有著 87%像呢！當套件開發者了解使用者的習慣，開發好上手語法糖，自然就習慣成自然，習慣成自然，喜歡上 Enzyme 了．
結論：為什麼前端測試 Jest 和 Enzyme 這麼搭？ Jest 就像一個大平台上面有很多好用的工具，但是對於元件測試比較不擅長，就這麼剛好 Enzyme 對於元件測試非常厲害，而且語法簡單易學，兩者搭配就像金庸武俠的楊過和小龍女，缺一不可，當玉女劍法和全真劍法雙劍合璧，這就是「玉女素心劍」的精髓所在．
如果覺得文章還不錯，對你有一點點幫助，請不要吝嗇給我 clap ，感謝你 :D
持續分享好文章 生活、知識、技術 ， etc.
