【催学社】前端的单元测试课

1. **分析需求：** * **目标：** 将上一稿（1088个汉字）缩减至 500～1000 个汉字（只计汉字）。 * **方法：** 增加学习顺序、门槛、学完产出、资料用法，如果字数不足就补；删减重复和空话，如果字数过多就删。不要超过 1000。 * **限制：** 不要重复堆砌标题，不要列文件名，仍只输出 HTML 片段（`

`、`

`、`

`、`

• `）。 * **原文背景：** 前端单元测试，重点在于测试框架构建、测试策略（行为验证、可预测性）、间接层处理（依赖注入、stub）、异步处理、API 测试。 2. **解构与精简（目标：500-1000 个汉字）：** * *旧结构：* * 这门课解决什么问题（约 200 汉字） * 适合什么基础与建议先看哪几块（约 300 汉字） * 学完能独立做什么与资料怎么配合练习（约 300 汉字） * *新结构策略：* * 小标题 1：这门课解决什么问题（精简至约 150 汉字） * 小标题 2：适合什么基础与建议先看哪几块（精简至约 250 汉字） * 小标题 3：学完能独立做什么与资料怎么配合练习（精简至约 250 汉字） 3. **起草与字数统计（汉字）：** * *小标题 1：这门课解决什么问题* 前端测试常面临断言空泛、逻辑覆盖不全的困境。本课直击工程痛点：如何保证测试的可预测性？面对随机数、日期等不可控输入该如何验证？如何干净利落地处理异步代码与间接依赖？课程通过从零实现一个迷你测试运行器，剥开框架封装，让你直击底层逻辑，掌握前端测试从“写断言”到“构建可维护测试体系”的完整方法论。 *字数：* 前(1)端(2)测(3)试(4)常(5)面(6)临(7)断(8)言(9)空(10)泛(11)、(0)逻(12)辑(13)覆(14)盖(15)不(16)全(17)的(18)困(19)境(20)。(0)本(21)课(22)直(23)击(24)工(25)程(26)痛(27)点(28)：(0)如(29)何(30)保(31)证(32)测(33)试(34)的(35)可(36)预(37)测(38)性(39)？(0)面(40)对(41)随(42)机(43)数(44)、(0)日(45)期(46)等(47)不(48)可(49)控(50)输(51)入(52)该(53)如(54)何(55)验(56)证(57)？(0)如(58)何(59)干(60)净(61)利(62)落(63)地(64)处(65)理(66)异(67)步(68)代(69)码(70)与(71)间(72)接(73)依(74)赖(75)？(0)课(76)程(77)通(78)过(79)从(80)零(81)实(82)现(83)一(84)个(85)迷(86)你(87)测(88)试(89)运(90)行(91)器(92)，(0)剥(93)开(94)框(95)架(96)封(97)装(98)，(0)让(99)你(100)直(101)击(102)底(103)层(104)逻(105)辑(106)，(0)掌(107)握(108)前(109)端(110)测(111)试(112)从(113)“(0)写(114)断(115)言(116)”(0)到(117)“(0)构(118)建(119)可(120)维(121)护(122)测(123)试(124)体(125)系(126)”(0)的(1

📁 【催学社】前端的单元测试课(1) 📁 2.资料 📁 1.视频 📁 front-end-testing-main 📄 大纲+代码.txt 📄 028.28-API 的多种测试方案.mp4 📄 026.26-可预测性-随机数-日期date.mp4 📄 025.25-不知道验证什么-完美主义&功能的目的&小步走.mp4.mp4 📄 014.14-实现 mini-test-runner.mp4.mp4 📄 024.24-行为验证.mp4.mp4 📄 027.27-快速反馈-处理异步代码time—promise.mp4 📄 021.21-程序的间接输入-环境变量-全局global-间接层处理技巧.mp4 📄 022.22-程序的间接输入-依赖注入.mp4.mp4 📄 019.19-程序的间接输入-依赖函数调用-stub 的应用.mp4 📄 030.30-手动测试到单元测试的认知转变.mp4 📄 029.29-参数化验证.mp4 📄 023.23-状态验证.mp4 📄 020.20-程序的间接输入-第三方库&对象&class&常量.mp4.mp4 📄 006.06-单元级别的功能测试.mp4 📄 008.08-写测试的顺序-通过单元测试替换手动验证.mp4 📄 013.13-掌握 Vitest 的调试技巧.mp4.mp4 📄 009.09-写测试的顺序-先写测试后实现 TDD.mp4 📄 001.01-为什么写测试-更高阶的调试手法-提高开发效率.mp4 📄 002.02-单元测试在修改代码时的好处.mp4 📄 007.07-写测试的顺序-后补测试.mp4.mp4 📄 004.04-自动化思维-功能验证.mp4 📄 012.12-掌握 Vitest 的基础 API.mp4.mp4 📄 016.16-准备测试数据的三种方式.mp4 📄 003.03-写测试的好处-活文档&改善程序设计.mp4 📄 018.18-最小准备测试数据原则.mp4 📄 011.11-编写第一个单元测试.mp4 📄 005.05-自动化思维-定位&修复bug.mp4 📄 010.10-不写测试的原因.mp4 📄 017.17-后门操作准备数据的方式.mp4.mp4 📄 015.15-对比 Vitest 和 Jest 之间的差异.mp4 📄 060.Vue实战-19-http 模块的功能介绍.mp4 📄 058.Vue实战-17-测试 tasks(5) & 尝鲜TDD.mp4 📄 050.Vue实战-09-测试 search&timer&promise&独居测试.mp4 📄 057.Vue实战-16-测试 tasks store(4) - 通过单元测试抓bug.mp4 📄 054.Vue实战-13-测试 tasks store - addTask 功能.mp4 📄 055.Vue实战-14-测试 tasks store(2).mp4 📄 056.Vue实战-15-测试 tasks store(3).mp4 📄 063.Vue实战-22-测试 gotoLogin & 重构 router 测试逻辑.mp4 📄 059.Vue实战-18-解决 indexedDB is not defined 报错.mp4 📄 053.Vue实战-12-群居测试 search 功能.mp4 📄 062.Vue实战-21-使用 TDD 的方式测试 router 模块.mp4 📄 042.Vue实战-1.1-登录注册功能介绍.mp4 📄 031.31-测试的基本策略-正向测试&反向测试&异常测试.mp4 📄 034.34-测试替身的类型-dummy-stub-spy-mock-fake.mp4 📄 086.推箱子-20-实现动态设置地图的行和列-更新行.mp4 📄 038.38-给测试命名的艺术.mp4 📄 039.39-调用同一模块内的函数会 mock 失败.mp4 📄 043.Vue实战-02-启动项目的方式.mp4 📄 046.Vue实战-05-重构测试 useRouter 的代码 提炼公共 helper 函数.mp4 📄 088.推箱子-22-实现拖拽批量设置地图.mp4 📄 090.推箱子-24-实现显示当前选择的编辑元素.mp4 📄 093.推箱子-27-实现数据展示区.mp4 📄 092.推箱子-26-实现放置目标点.mp4 📄 045.Vue实战-04-测试 useRouter 的最佳策略.mp4 📄 091.推箱子-25-实现放置箱子.mp4 📄 052.Vue实战-11-测试 searchCommands.mp4 📄 047.Vue实战-06-测试 window.open 的方式&重构整理 theHeader.mp4 📄 049.Vue实战-08-测试 commandModal&键盘事件.mp4 📄 084.推箱子-18-实现元素选择.mp4 📄 033.33-掌握使用 test double 测试替身的核心思想.mp4 📄 037.37-Vitest 模拟浏览器环境&自定义环境.mp4 📄 048.Vue实战-07-第二个功能 command 搜索功能的介绍和代码实现.mp4 📄 032.32-不是所有代码都值得写测试.mp4 📄 040.40-snapshot 快照测试.mp4 📄 044.Vue实战-03-第一个组件 TheHeader-测试 useRouter 的策略.mp4 📄 089.推箱子-23-实现放置玩家.mp4 📄 041.Vue实战-01-项目概述.mp4 📄 035.35-独居测试和群居测试.mp4 📄 036.36-测试的拆卸.mp4 📄 051.Vue实战-10-测试 searchTasks & 测试 pinia.mp4 📄 087.推箱子-21-实现动态设置地图的行和列-更新列.mp4 📄 061.Vue实战-20-测试 http 模块.mp4 📄 072.推箱子-06-实现箱子的渲染.mp4 📄 071.推箱子-05-实现玩家碰撞墙.mp4 📄 064.Vue实战-23-测试登录表单的正确方式-单元测试的三要点.mp4 📄 073.推箱子-07-实现推箱子.mp4 📄 065.Vue实战-24-使用 snapshot 测试表单 rule.mp4 📄 069.推箱子-03-实现地图.mp4 📄 067.推箱子-01-项目概述.mp4 📄 074.推箱子-08-实现箱子碰到墙&碰到箱子的检测.mp4 📄 075.推箱子-09-实现放置点的渲染.mp4 📄 083.推箱子-17-实现地图编辑区.mp4 📄 078.推箱子-12-实现进入下一关-动态初始化游戏.mp4 📄 081.推箱子-15-地图编辑器概述.mp4 📄 070.推箱子-04-实现玩家&移动.mp4 📄 066.Vue实战-25-测试拖拽功能.mp4 📄 077.推箱子-11-实现游戏通关的检测.mp4 📄 079.推箱子-13-实现进入下一关-切换游戏数据.mp4 📄 085.推箱子-19-实现动态设置地图的行和列-初始化.mp4 📄 068.推箱子-02-初始化项目.mp4 📄 080.推箱子-14-阶段性总结.mp4 📄 082.推箱子-16-实现路由的切换.mp4 📄 076.推箱子-10-实现箱子检测放置点.mp4 📁 docs 📄 yarn.lock 📄 pnpm-lock.yaml 📄 README.md 📄 package.json 📄 .gitignore 📁 .vitepress 📁 components 📁 public 📁 guide 📄 index.md 📄 CVideo.vue 📄 favicon.ico 📄 logo.png 📁 cache 📁 theme 📄 config.js 📄 03-unit-test-definition.md 📄 28-keeping-test-independent.md 📄 09-vitest-vs-jest.md 📄 23-test-third-party-library.md 📄 08-vitest-debug.md 📄 20-parameterized-test.md 📄 16-test-double.md 📄 22-test-api.md 📄 13-input-and-output.md 📄 04-when-writing-tests.md 📄 01-why-write-testing.md 📄 00-introduction.md 📄 05-why-not-write-tests.md 📄 12-where-put-test-data.md 📄 14-verify-way.md 📄 02-automatic-thinking.md 📄 19-layer-test.md 📄 07-vitest-test-api.md 📄 26-test-only-one-focus.md 📄 06-write-first-unit-test.md 📄 15-verify-what.md 📄 17-test-double-types.md 📄 10-mini-test-runner.md 📄 21-test-asynchronous.md 📄 18-setup-test-double.md 📄 11-to-prepare-data.md 📄 58-mini-vue-runtime-core-add-test.md 📄 33-low-levels-of-assertions.md 📄 35-magic-string.md 📄 42-the-fragile-test.md 📄 50-manual-debugging.md 📄 52-slow-test.md 📄 30-testable-design.md 📄 51-manual-intervention.md 📄 49-assertions-roller.md 📄 34-transition-assertion.md 📄 46-never-failed-test.md 📄 53-mature-and-not-repeat.md 📄 47-the-test-of-lying.md 📄 48-too-loose.md 📄 37-lengthy-installation.md 📄 55-vue3-project.md 📄 36-overprotective.md 📄 41-repetition.md 📄 59-tdd-args.md 📄 29-easy-and-read.md 📄 40-immaterial-details.md 📄 39-logical-division.md 📄 45-ambiguity-annotation.md 📄 43-the-lack-of-cohesion.md 📄 24-test-date.md 📄 27-avoid-condition-test-logic.md 📄 31-use-the-front-door-first.md 📄 32-isolation-SUT.md 📄 38-schizobulia.md 📄 54-oop-and-SOLID.md 📄 44-comment-out-the-test.md 📄 25-tear-down.md 📄 56-react-project.md 📄 course-overview.md 📄 57-vue3-tetris.md 📁 deps 📄 MyLayout.vue 📄 index.js 📄 _metadata.json 📄 vue.js.map 📄 vue.js 📄 package.json