1. 我“码”由我不由天
谈谈前端测试的作⽤与实践
李 泽 帆 @ L Z A N E

2. ✈ 🌅 👫

3. 📲

4. 👨💻😠

5. 👨💻😡

6. 👨💻

7. 李泽帆（靓仔）@LZANE
毕业于中⼭⼤学
腾讯CDC前端⼯程师

8. 感兴趣的东⻄
Web开发
数据科学 / Data Science
计算机视觉 / CV
智能家居 / Smart Home
指弹吉他 / Fingerstyle guitar
⻄藏 / Tibet
…

9. 测试的分类
单元测试、集成测试、端对端测试

11. 2个单元测试
0个集成测试
0个端对端测试

14. 前端测试的作⽤
提升信⼼、开发阶段实时反馈、时间更有价值

15. 消除恐惧，提升信⼼
紧急修复线上bug
• 修bug -> 测试通过 -> 发布
• 不再牵⼀发⽽动全身

16. 消除恐惧，提升信⼼
重构，让代码更好
IN
IN
IN
OUT
OUT
OUT

17. IF
IN
IN
IN
OUT
OUT
OUT
OUT

18. IN
IN
IN
OUT
OUT
OUT

19. IN-A
IN-B
IN-C
OUT-A
OUT-B
OUT-C

20. IN-A
IN-B
IN-C
OUT-A
OUT-B
OUT-C
IN-A
IN-B
IN-C
OUT-A
OUT-B
OUT-C
IN-A
IN-B
IN-C
OUT-A
OUT-B
OUT-C
IN-A
IN-B
IN-C
OUT-A
OUT-B
OUT-C

21. Before you start refactoring, make sure you have a solid
suite of tests. These tests must be self-checking.
— Martin Fowler

22. 开发阶段实时反馈
没有单元测试和集成测试

23. 开发阶段实时反馈

24. 时间更有意义，更有价值
• debug⼤部分时候是⼀次性⼯作
• 写测试则能为团队留下资产

25. 更多测试的作⽤
• 指导写出更好的代码（Good code are also easy to test）
• 测试即⽂档（对开发⽽⾔）
• 对需求的理解，明确正在写的功能
• 减少上下⽂切换

26. 前端测试的实践
测试的组成、测试驱动开发TDD

27. 测试框架
• 运⾏库
• 断⾔库
• mock

28. ⼀个测试的组成

30. Make it fail

31. Make it pass

32. Format it

33. Make it fail Again

34. Make it pass

35. TDD的⼏个准则
• Write only enough of a unit test to fail.
• Write only enough production code to make the failing unit test
pass.
• 测试失败 => 写业务代码
• 测试通过 => 写测试代码

36. 测试被常问的问题
浪费时间？哪些代码需要写测试？代码覆盖率？…

37. 浪费时间？
• debug修bug，跟其他⼈解释代码的时间 -> 写测试的时间
• 减少返⼯，减少上下⽂切换的次数
The results of the case studies indicated that the pre-release
defect density of the four products decreased between 40% and
90% relative to similar projects that did not use the TDD
practice. Subjectively, the teams experienced a 15–35%
increase in initial development time after adopting TDD.
⼀份来⾃微软的报告

39. 哪些代码需要测试？颗粒度？
• 公共API，⿊盒测试
• 会被多次调⽤的组件
• 复杂的逻辑

40. 测试覆盖率？coverage
• 看被测试部分的重要性，重要的部分80%
• CI配置threshold， 只增不减策略

41. ✈ 🌅 👫

42. 💏

44. 参考
【书籍】Refactoring: Improving the Design of Existing Code (2nd Edition) by Martin Fowler
【书籍】Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin
【⽂章】 An Overview of JavaScript Testing in 2019 ( https://medium.com/welldone-software/
an-overview-of-javascript-testing-in-2019-264e19514d0a )
【课程】JavaScript Testing Practices and Principles by Kent C. Dodds ( https://
frontendmasters.com/courses/testing-practices-principles/ )

45. Q&A
Github: @LZANE
Blog: www.lzane.com
Email: cn.zanelee@gmail.com