Snapshot Everything @ Modern Web 2017

Snapshot Test 是 Facebook 於2016年發佈的全新測試觀念與工具，本質上是屬於 Regression Test 的範疇，實質上它提倡的是「寫最少的測試碼，做最有效的測試」。帶您快速的認識這個測試學派與起手式，並檢閱導入團隊九個月來的效益與心得。

Transcript

1. Aaron / ੜᇰ S E N A P S H O T E V R Y T H I N G 從元件測試點燃新⼀代測試觀念
3. Aaron (a.k.a ੜᇰ) 籆ᤅ獮ᒒঁ CodePen ሻ疑 GitHub ᤋ݋ 犨肬ෝ Taroko Software 砾犨 Tech Lead 癲獋㮆 Team ጱૡ݋ https://codepen.io/aaronchuo/
5. 獮ᒒ介手ጱ膑Ӯኴ 1
6. 傶Ջ讕ᥝ䌃介手牫 • 嘦狒纷ୗ䁆ᤈጱ奾ຎᒧݳ毆๗ • 嘦狒෭盅狕硬纷ୗ嘨犋䨝疩膌覍毆๗ጱ୽段 • 姘瞱纷ୗ嘨ߝ搡ࣁӞਧጱ࿜伛 • 㶧ۗ樄咳ᘏ硬珿纷ୗ嘨ጱ戔懯 • 蟴ݳᛔ㵕玕窕纷 (CI) ݢ犥൉䥮樄咳ߝ搡 • ๚㬵䌘ෝ᯿䯤纷ୗ嘨磪芛य़ጱۗፅ
7. 傶Ջ讕懵玬䌃介手牫 • ीے樄咳ጱ碻樌౮๜ (1.5~2狝) • 䌃介手ጱ螂纷碪耆卓݈篷肗 • 襑穩硬虋碻牧ଉ襑ᥝ狕硬介手嘨 • 戔懯硬虋碻牧ଉ襑ᥝ狕硬介手嘨 • 虻碘໒ୗ硬虋碻牧ଉ襑ᥝ狕硬介手嘨 • 襑ᥝ瞱媲姘虁介手嘨
8. 獮ᒒ介手ጱ獊碝ᶐ޸牫 • Snapshot Test 犋ݝฎӞ圵介手ොဩ • Snapshot 犋ฎ֦犥傶ጱ̿౼瑽̀ • Snapshot 犋ฎݚӞॺ介手ૡٍ • Snapshot ䷱磪䋊聜౮๜ • Snapshot 墋玕 Assertion • Snapshot य़ଏ仂੝介手嘨 • Snapshot य़ଏ仂੝䌃介手ጱ碻樌 • Snapshot य़ଏ仂੝介手ጱ耆卓膏蕦褾ଶ
9. ℂՈ觊樄ত睞஑懿袅ኞၚ藯蚏...
10. ݘ碻狡...
11. 磪ԧፘ秚犥盅...
12. 匍ࣁ...
13. 傶Ջ讕Ո觊ᥝ懿袅ࢧ䛂牫
14. 獮ᒒ介手ጱ碝Ӯኴ 2
15. Snapshot Test ጱ禊盢 • ̿ೌӥ̀ྯӞ圵眐हӥጱ䁆ᤈ奾ຎ • ̿穉斃̀蝡稞膏Ӥ稞ጱ䁆ᤈ奾ຎ • ̿Pass̀蔭纈膏Ӥ稞䁆ᤈ奾ຎፘݶ • ̿Fail̀蔭纈膏Ӥ稞䁆ᤈ奾ຎ犋ݶ
16. Snapshot Test 螀֢ܻቘ
17. Snapshot Test ጱ羊ᐟ • 仂੝介手嘨ጱ size • 仂੝䌃介手ጱ碻樌౮๜ • 褔犵ๅ硬介手嘨ጱ毱ሲ • ๅ磪硳瑿瞟ڊ覍毆๗ጱ୽段 • य़ଏ൉䥮介手薟荠ሲ • 獮ᒒૡ纷䒍虋஑ๅ盠禼
18. • via yarn:
 
 • via npm:
 
 ਞ蕕 $ yarn add --dev jest-cli enzyme enzyme-to-json $ npm i --save-dev jest-cli enzyme enzyme-to-json
19. • react < 15.5.0
 
 • react >= 15.5.0
 
 ਞ蕕 $ yarn add --dev react-addons-test-utils $ yarn add --dev react-test-renderer
20. • Jest 犋஠䌃犨֜戔ਧܨݢֵአ • ֕磪碻狡౯㮉襑ᥝ蝱Ӟྍጱֵਙๅঅአ:
 
 戔ਧ "jest": { "roots": [ "<rootDir>/tests/", "<rootDir>/src/" ], "testRegex": "\\.(spec|e2e|snapshot)\\.js$", "coverageReporters": ["json", "html", "text"], "browser": true, "moduleNameMapper": { "components(.*)": "<rootDir>/src/components$1", "utils(.*)": "<rootDir>/src/utils$1", "constants(.*)": "<rootDir>/src/constants$1", "containers(.*)": "<rootDir>/src/containers$1", "reducers(.*)": "<rootDir>/src/reducers$1", "routing(.*)": "<rootDir>/src/routing$1", "actions(.*)": "<rootDir>/src/actions$1", "sagas(.*)": "<rootDir>/src/sagas$1", "mock-data": "<rootDir>/tests/__mocks__/mockData.js" } }
21. 盠蝧藨蘷 • enzyme
 (http://airbnb.io/enzyme/index.html) • shallow • mount • enzyme-to-json
 (https://github.com/adriantoine/enzyme-to-json)
22. Assertion • ֵአ Snapshot 盅ಅ磪ጱ assertion 裾蝡䰬:
 
 
 • ℂ種ޞ獨 toEqual(), toBe(), toWhatever.. !? expect(shallow(<Foo />)).toMatchSnapshot();
23. Snapshot Test - ᒫӞྍ 䁆ᤈ介手 $ jest
24. • ᪒ਠ介手盅 Jest 䨝ᛔ㵕叨ኞ snap 䲆㪔ਂ 硯ෝ __snapshots__ 虻碘䄸皈ӥ
 
 
 Snapshot Test - ڡ稞䁆ᤈ
25. • ᪒ਠ介手盅 Jest 䨝疥介手奾ຎ膏ਂ硯ෝ __snapshot__ 虻碘䄸皈ӥጱ snap 䲆穉䌘
 
 
 Snapshot Test - ᒫԫ稞犥盅
26. • Fail 磪獋圵఺嬝: • 膏ӤӞ稞ጱ䁆ᤈ奾ຎ犋ݶ (Diff) • ᪒介手螂纷蝽ک㺔氂
 
 Snapshot Test - Fail
27. • 蝡ฎ Snapshot Test 磧᯿ᥝጱ㵕֢:
 Fail ጱ碻狡牧஠殾݄ review 獮盅粚๜ጱ Diff牧嘦藨碝ጱ奾ຎฎ玽傶毆๗ጱ奾ຎ
 
 
 Snapshot Test - Diff Review
28. • Pass 磪獋圵఺嬝: • 膏ӤӞ稞ጱ䁆ᤈ奾ຎਠ獊ፘݶ • Update snap 盅犥蝡稞ጱ䁆ᤈ奾ຎ傶伛
 
 Snapshot Test - Pass
29. • Snapshot 虏介手薟荠ሲ盠蝧Ӭ磪硳ጱ൉䥮 • 磧੝ጱ介手嘨牧磧य़ጱ薟荠ሲ • አ Branches 狶傶磪硳ጱ瞲秂 介手薟荠ሲ (Test Coverage)
30. • Snapshot 虏介手薟荠ሲ盠蝧Ӭ磪硳ጱ൉䥮 • 磧੝ጱ介手嘨牧磧य़ጱ薟荠ሲ • አ Branches 狶傶磪硳ጱ瞲秂 介手薟荠ሲ (Test Coverage)
31. • አ HTML Reporter 䲒憙介手ጱ磪硳௔ • ݢ犥咳匍介手ጱ緹讨牧㪔斔ۗ硬珿介手 介手薟荠ሲ (Test Coverage)
32. • አ HTML Reporter 䲒憙介手ጱ磪硳௔ • ݢ犥咳匍介手ጱ緹讨牧㪔斔ۗ硬珿介手 介手薟荠ሲ (Test Coverage)
33. زկ介手 3
34. 㯽翄ጱ介手嘨 • 犥 React TodoMVC 傶ֺ • UI 介手ጱ耆卓
35. Snapshot Test ጱ介手嘨 • ࣁݶ㮆زկ牏ፘݶ介手አֺ牏ፘݶ薟荠ሲӥ • Demo >>
36. زկ介手ጱ缌槹 • ྯӞ稞蝨౮ re-render ጱᤈ傶牧᮷襑ᥝ狶Ӟ 稞 snapshot • 犥 Branches 薟荠ሲ傶㷢ᘍ独
37. Snapshot Test ጱ皤֐ 4
38. አ Snapshot 介手 Reducer አ Snapshot 介手 Action
39. አ Snapshot 介手 Redux-saga አ Snapshot 介手 Utility
40. አ Snapshot 狶 Functional Test • Snapshot Serializer • አ serializer 㬵墋玕介手嘨 • ᛔ૩䌃Ӟඪ serializer 㬵ᛔ懪 snap • 玲դ functional test • ๅग़ጱݢ胼௔...
41. Snapshot Everything • ٌ䋿 Snapshot Test ฎӞ圵碝禊盢 • Snap ٌ䋿疰ฎ expected values ጱ褸ݳ
42. 疩獈㿁褧ጱ妿涢膏ஞ஑ 5
43. ℂ疩獈ک獊ᶎ皤֐ጱ蝡Ӟଙ... • य़ଏ褔犵介手ጱ౮๜ • 薪盢旉虋಍ฎ磧य़ጱ೴䜗 • 介手薟荠ሲጱ蝈௏
44. 薪盢旉虋಍ฎ磧य़ጱ೴䜗
45. 虏౯㮉Ӟ蚏䢐಼ Snapshot Test މ牦
47. Wanted • Front-end Engineer • Senior Front-end Engineer • Rails Developer • iOS Developer • Android Developer • UI Designer