擊殺！前端測試Boss全攻略！ @ JSDC 2017

在寫前端測試時，是否發覺 UI 測試很繁瑣？是否發覺非同步測試很複雜？是否發覺衝測試覆蓋率有時候很浪費生命？曾經遇到不知如何測試的程式碼？曾經因此而感到厭世？前端測試是否曾經把你弄得嫑嫑的？

本議程以 React + Redux 為例，將分享寫測試時常常面臨的挑戰，並介紹當今熱門的測試框架 Jest 如何以優雅的姿態一一擊破這些問題，從如何寫出簡潔易讀的測試碼、如何 Mock 函式或元件、如何測試 Lifecycle Methods、如何測試有Timer (setTimeout) 的程式、如何處理程式裡的隨機值或 Timestamp、如何測試 Called function 所被帶入的參數、如何使用 Snapshot 節省 UI 測試的成本...等各種議題。
最後會進一步分享 Jest 強大的測試覆蓋率輔助工具，並探討測試覆蓋率的效益指標。加碼介紹如何使用 Snapshot serializer 優化測試工作。

讓前端工程師快樂寫測試、輕鬆下班享受生活！

Transcript

1. 䢗穀牦獮ᒒ介手Boss獊硭ኼ牦
2. Aaron (a.k.a ੜᇰ) 籆ᤅ獮ᒒঁ CodePen ሻ疑 GitHub ᤋ݋ 犨肬ෝ Taroko Software 砾犨 Tech Lead 癲獋㮆 Team ጱૡ݋ https://codepen.io/aaronchuo/
3. ֦Ꭳ螇犡ॠ蝡䁰ጱԆ氂㻟牫
4. ই֜樄ত䌃介手 ই֜樄ত䌃介手 螭ฎ㬵拻Ӟ讨䓄扖
5. ই֜樄ত䌃介手牫
6. Ӟ牏藶ೲᆙਥ翕ጱTutorial狶Ӟ螁 https://facebook.github.io/jest/docs/en/getting-started.html
7. ԫ牏獵ӥጱ藶托褂API෈կ https://facebook.github.io/jest/docs/en/api.html
8. ӣ牏螭磪㺔氂藶珿አStackOverflow https://stackoverflow.com/
9. ᮎ螭አ֦㬵藯㻟牫
10. WTF !!
11. অމ牦䔂扖犋ग़藯
12. 㬵拻Ӟ犚䓄扖މ牦
13. youCantSeeMe
19. 犥Ӥ蝡㮆礯ֺ
20. 䌃ԧ介手ਙ犖篷ဩcover
21. ᢞ牫
22. Jest
23. 蒈圸ӮኴӤ磧盠ጱRunner
24. ݢ秇硈browser絑ह
25. Assertion 狒ኸJasmineܻ磪ጱ 螭碝ीԧๅग़অአጱ
26. 䔶य़ጱMock秚ګ
27. 獉ୌCoverage䁭ޞ
28. অአጱHTML粚 Coverage Tool
31. 獊碝ሻ఺ Snapshot Test
32. 吚簁
33. 螭磪ᐟӞ膢ጱ褧݋ (ኞ眲羬)
34. Enzyme
35. 猟jQueryጱزᔰ螡䢔瑊
37. ெ讕樄ত牫 ெ讕ਞ蕕牫 ெ讕䌃牫
38. ਥො෈կ
39. Component介手
40. 秇硈ᤈ傶 simulate
42. 介手زկ჉礕
44. 盄耆卓̴盄簡
45. ࣁJest 14㺔Ӯጱ补䕃
46. Snapshot Test
49. Action介手
52. Reducer介手
54. ইຎ
55. stateᇔկ獉਻盄谎य़
56. 介手ݢ胼䨝䌃ک閺閺ጱ
57. ಅ犥
58. ٌ䋿
59. 螭ݢ犥ֵአSnapshot Test
60. 介手覍ݶྍ纷ୗ (Asynchronous Test)
61. Jest 磪盄ग़ොୗ犨֦螡አ
62. 磧ଉ憎ጱ done() ࢧ޷
64. Promise
67. Generator Function
69. Async / Await
71. Jest虏覍ݶྍ介手 虋஑盄猻褷
72. ֦縌茐ԧ㻟牫
73. 疰蝡䰬牫
74. Jest 螭磪ๅ螹䘣ጱ
75. Jest.mock()
76. Ӟ獥᮷ฎ؃ጱ
77. Jest.fn()
78. 猂猂ࣁ緳矒֦ጱ樌藽 (Spy)
79. toHaveBeenCalled() toHaveBeenCalledTimes() toHaveBeenCalledWith(args)
80. .mockReturnValue()
81. 介手珀磪timerጱ纷ୗ犖䷱㺔氂牦
82. jest.useFakeTimers()
83. jest.runAllTimers()
84. jest.advanceTimersByTime(ms)
85. 墋玕import᪠䕩 (moduleNameMapper)
88. ๅग़ጱ藶托褂ਥො෈կ
89. Q & A
90. Wanted Frontend Engineer NodeJS Fullstack Engineer Rails Backend Engineer UX Designer QA Engineer