这门课解决什么问题
前端开发者经常遇到这样的困境:改了一行代码,线上就出问题;想重构组件,却不敢下手。根本原因是没有测试兜底。慕课网的前端要学的测试课从Jest入门到TDD/BDD双实战,就是为了解决这个问题。它不教你怎么写组件,而是教你怎么让组件变得可靠。
课程从Jest这个框架讲起,先让你理解自动化测试的背景和原理,再一步步带你掌握匹配器、异步测试、钩子函数、Mock这些核心技能。最后结合Vue做TDD实战,让你真正把测试用起来。学完这门课,你会有信心重构代码,因为测试会告诉你有没有破坏旧功能。很多人学了两年前端,测试这块完全是空白,这门课补齐的就是这个缺口。
适合什么基础、建议怎么看
适合已经能写基本Vue组件、熟悉ES6语法的人。如果你还在纠结let和const的区别,可以先放一放。课程共四章,建议按照顺序来,不要跳着看。第一章11分钟试看,用来建立正确认知,别跳过。第二章用两三天时间吃透Jest基础,这是整个课程的基石——匹配器怎么用、异步代码怎么测、Mock怎么实现,每一节都要动手练。
第三章是进阶内容,专门讲snapshot、mock timers和DOM测试,这两块比较难,建议放慢速度,多看几遍。第四章开始Vue的TDD实战,用Header组件当例子。这部分一定要跟着录播敲代码,不要只看。TDD是技能不是知识,得靠练。如果白天时间不够,周末可以集中攻克前两章,这样节奏更稳。
学完能做什么、资料怎么用
学完后你应该能独立给现有组件写单元测试,知道什么时候该mock接口、什么时候该测DOM、什么时候该用snapshot。你能跑通TDD的完整流程:先写失败的测试,再让代码变绿,最后安全重构。这不是速成班,是重新建立写代码的习惯。
课程配套有完整的视频和示例代码,但光看不练等于白看。每章都有小结和讨论题,那是给你检验是否真懂的。试看章节看完别停,后面那几章才是真正值钱的内容。录播可以加速,但mock和异步测试那块必须放慢,自己动手把例子敲一遍。资料里的示例代码是给你参考的,不要照抄,要理解背后的逻辑。学完后找一个小项目练手,把学到的东西用起来,这样才能真正内化。
课程目录
第1章 课程导学 试看 1 节 | 11分钟 1-1 前端要学的测试课 (10:14) 第2章 Jest 前端自动化测试框架基础入门 试看 14 节 | 222分钟 2-1 自动化测试背景及原理 (22:35) 2-2 前端自动化测试框架 Jest (06:26) 2-3 使用 Jest 修改自动化测试样例 (14:44) 2-4 Jest 的简单配置 (19:29) 2-5 Jest 中的匹配器 (26:14) 2-6 Jest 命令行工具的使用 (27:38) 2-7 异步代码的测试方法(1) (17:56) 2-8 异步代码的测试方法(2) (15:26) 2-9 Jest 中的钩子函数 (21:05) 2-10 钩子函数的作用域 (09:47) 2-11 Jest 中的 Mock(1) (19:02) 2-12 Jest 中的 Mock(2) (14:30) 2-13 章节小结 (06:13) 2-14 【讨论题】关于前端自动化测试,你有多少了解呢? 第3章 Jest难点进阶 6 节 | 91分钟 3-1 snapshot 快照测试 (24:18) 3-2 mock 深入学习 (17:55) 3-3 mock timers (15:24) 3-4 【讨论题】Jest 中的 Mock得实现 3-5 ES6 中类的测试 (24:44) 3-6 Jest 中对 DOM 节点操作的测试 (07:59) 第4章 Vue 中的 TDD 与 单元测试 15 节 | 218分钟 4-1 什么是TDD? (09:42) 4-2 Vue 环境中配置 Jest (17:38) 4-3 vue-test-utils 的配置及使用 (25:35) 4-4 使用 TDD 的方式开发 Header 组件(1) (30:48) 4-5 使用 TDD 的方式开发 Header 组件 (2) (10:35) 4-6 Header 组件样式新增及快照测试 (09:35) 4-7 通用代码提取封装 (05:56) 4-8 UndoList 的实现(1) (14:51) 4-9 UndoList 的实现(2) (13:48) 4-10 UndoList 样式修饰及测试代码优化 (16:41) 4-11 UndoList 编辑功能实现(1) (12:56) 4-12 UndoList 编辑功能实现 (2) (31:01) 4-13 【讨论题】TDD 测试驱动的开发,研发流程是怎样的 4-14 CodeCoverage 代码覆盖率 (13:16) 4-15 章节小结 (04:57) 第5章 React中的 TDD 与 单元测试 17 节 | 246分钟 5-1 什么是TDD?(同4-1) (09:42) 5-2 React 环境中配置 Jest(1) (16:03) 5-3 React 环境中配置 Jest(2) (13:33) 5-4 Enzyme 的配置及使用 (32:00) 5-5 【讨论题】你对 Enzyme 是怎么理解的 5-6 使用 TDD 的方式开发 Header 组件 (1) (19:52) 5-7 使用 TDD 的方式开发 Header 组件 (2) (26:01) 5-8 Header 组件样式新增及快照测试 (08:22) 5-9 通用代码提取封装 (09:07) 5-10 UndoList 的实现(1) (12:46) 5-11 UndoList 的实现(2) (16:04) 5-12 UndoList 样式修饰及测试代码优化 (19:39) 5-13 UndoList 编辑功能实现 (1) (17:08) 5-14 UndoList 编辑功能实现 (2) (14:42) 5-15 UndoList 编辑功能实现(3) (16:26) 5-16 CodeCoverage 代码覆盖率 (08:49) 5-17 章节小结 (05:43) 第6章 Vue中的 BDD 与 集成测试 6 节 | 92分钟 6-1 BDD 的概念以及与 TDD 的对比 (15:53) 6-2 使用 BDD 和集成测试进行 Vuex 项目的测试(1) (12:41) 6-3 使用 BDD 和集成测试进行 Vuex 项目的测试(2) (13:24) 6-4 异步测试(1) (29:05) 6-5 异步测试(2) (08:26) 6-6 路由页面的代码组织 (12:02) 第7章 React中的 BDD 与 集成测试 8 节 | 109分钟 7-1 BDD 的概念以及与 TDD 的对比 (16:36) 7-2 使用 BDD 和集成测试进行 Redux 项目的测试(1) (17:16) 7-3 使用 BDD 和集成测试进行 Redux 项目的测试(2) (18:03) 7-4 异步测试(1) (17:00) 7-5 异步测试(2) (19:49) 7-6 异步测试(3) (07:05) 7-7 路由页面的代码组织 (13:07) 7-8 【讨论题】BDD 行为驱动的开发,研发流程是怎样的 第8章 前端自动化测试的思考总结 1 节 | 14分钟 8-1 课程总结 (13:44)





