重新定义单元测试的价值

很多前端开发者把写测试当成上线前的额外负担，总觉得编写测试代码比实现功能更耗时且难维护。这门课的核心在于纠正这种认知偏差：单元测试并非简单的结果断言，而是一套提升开发效率、降低重构风险的系统方法论。课程从底层逻辑出发，揭示测试在修改旧代码时充当“安全网”的作用，并详细对比了测试驱动开发、后置补测等不同策略的适用边界。通过重构思维，你会意识到高质量的测试不仅是代码的文档，更是敢于触碰复杂逻辑的底气。学完这部分，你能独立判断何时该写测试、何时该简化测试，避免陷入为了测试而测试的形式主义陷阱，真正将测试融入日常开发流程而非视为独立任务。

结合 Vue 实战深入底层原理

课程没有停留在 API 语法的罗列，而是通过“推箱子”游戏和任务管理 Store 两个真实场景，演示在 Vue 3 环境中如何落地测试。从组件交互到状态管理，课程展示了如何测试路由钩子等复杂依赖，并重点解析 Vitest 的运行时机制。你不仅学习如何模拟浏览器环境、处理异步 Promise 和定时器，还通过手写迷你测试运行器来理解框架背后的执行逻辑。这种“知其所以然”的深度，能让你在面对框架版本更新或测试脚本失效时，具备排查底层问题的能力。资料中的视频部分建议配合实际项目练习，特别是涉及随机数、日期等不可控因素的章节，务必动手复现代码，以掌握参数化验证覆盖边界条件的具体技巧，从而编写出具备高可预测性的测试用例。

攻克依赖隔离与测试替身

测试最难的部分往往在于隔离外部依赖。课程后半段聚焦于状态验证与行为验证的本质区别，系统讲解 Stub、Mock、Spy 等测试替身的使用策略。针对环境变量、全局对象及第三方库等间接输入，课程提供了依赖注入的实操方案，教你通过注入接口解耦被测对象与外部系统，确保测试代码的独立性与可预测性。学完这门课，你能独立为中小型 Vue 项目搭建完整的测试体系，识别代码中的隐藏 Bug 并撰写可维护的测试用例。建议学习者先掌握 Vitest 基础调试技巧，再结合 Vue 实战章节进行代码演练，最后深入依赖注入模块以巩固核心概念。整个学习过程强调“小步快跑”，在复现课程案例中体会测试对代码质量的实际保护，而非机械记忆语法，从而在团队中确立技术影响力。

课程目录

📁 1.视频 078.推箱子-12-实现进入下一关-动态初始化游戏.mp4
 [79.2 MB] 074.推箱子-08-实现箱子碰到墙&碰到箱子的检测.mp4
 [53.5 MB] 071.推箱子-05-实现玩家碰撞墙.mp4
 [100.2 MB] 072.推箱子-06-实现箱子的渲染.mp4
 [73.0 MB] 041.Vue实战-01-项目概述【优质资源‖关注：cunWorkNotes 解锁】.mp4
 [38.0 MB] 044.Vue实战-03-第一个组件 TheHeader-测试 useRouter 的策略【持续更新‖免费提供：CunworknoteS】.mp4
 [76.3 MB] 032.32-不是所有代码都值得写测试【资源精选‖更多关注：CunworkNotes】.mp4
 [28.7 MB] 037.37-Vitest 模拟浏览器环境&自定义环境【不易整理‖请关注：CunWorkNoteS】.mp4
 [53.8 MB] 033.33-掌握使用 test double 测试替身的核心思想【整理不易‖记得关注：CunWorKNotes】.mp4
 [32.0 MB] 045.Vue实战-04-测试 useRouter 的最佳策略【不易整理‖请关注：CunWorkNoteS】.mp4
 [124.1 MB] 092.推箱子-26-实现放置目标点.mp4
 [54.3 MB] 093.推箱子-27-实现数据展示区【资源精选‖更多关注：CunworkNotes】.mp4
 [29.9 MB] 031.31-测试的基本策略-正向测试&反向测试&异常测试.mp4
 [60.1 MB] 056.Vue实战-15-测试 tasks store(3).mp4
 [77.8 MB] 055.Vue实战-14-测试 tasks store(2).mp4
 [44.6 MB] 054.Vue实战-13-测试 tasks store - addTask 功能【持续更新‖免费提供：CunworknoteS】.mp4
 [127.3 MB] 057.Vue实战-16-测试 tasks store(4) - 通过单元测试抓bug.mp4
 [69.0 MB] 007.07-写测试的顺序-后补测试.mp4
 [79.5 MB] 002.02-单元测试在修改代码时的好处.mp4
 [47.9 MB] 029.29-参数化验证.mp4
 [62.1 MB] 019.19-程序的间接输入-依赖函数调用-stub 的应用.mp4
 [71.4 MB] 014.14-实现 mini-test-runner.mp4
 [133.6 MB] 025.25-不知道验证什么-完美主义&功能的目的&小步走.mp4【更多精选‖公众号：CunWorknotes】 .mp4
 [41.4 MB] 028.28-API 的多种测试方案.mp4
 [170.1 MB] 026.26-可预测性-随机数-日期date.mp4
 [47.2 MB] 024.24-行为验证.mp4
 [86.5 MB] 027.27-快速反馈-处理异步代码time—promise.mp4
 [93.4 MB] 021.21-程序的间接输入-环境变量-全局global-间接层处理技巧.mp4
 [41.8 MB] 022.22-程序的间接输入-依赖注入.mp4
 [83.7 MB] 030.30-手动测试到单元测试的认知转变.mp4
 [81.2 MB] 023.23-状态验证.mp4
 [66.2 MB] 020.20-程序的间接输入-第三方库&对象&class&常量.mp4
 [60.7 MB] 006.06-单元级别的功能测试.mp4
 [45.3 MB] 008.08-写测试的顺序-通过单元测试替换手动验证.mp4
 [50.1 MB] 013.13-掌握 Vitest 的调试技巧.mp4
 [65.8 MB] 009.09-写测试的顺序-先写测试后实现 TDD.mp4
 [80.5 MB] 001.01-为什么写测试-更高阶的调试手法-提高开发效率.mp4
 [71.9 MB] 004.04-自动化思维-功能验证.mp4
 [52.3 MB] 012.12-掌握 Vitest 的基础 API.mp4
 [182.9 MB] 016.16-准备测试数据的三种方式.mp4
 [73.7 MB] 003.03-写测试的好处-活文档&改善程序设计.mp4
 [43.2 MB] 018.18-最小准备测试数据原则.mp4
 [51.7 MB] 011.11-编写第一个单元测试.mp4
 [92.9 MB] 005.05-自动化思维-定位&修复bug.mp4
 [70.3 MB] 010.10-不写测试的原因.mp4
 [42.2 MB] 017.17-后门操作准备数据的方式.mp4
 [27.2 MB] 015.15-对比 Vitest 和 Jest 之间的差异.mp4
 [69.9 MB] 060.Vue实战-19-http 模块的功能介绍.mp4
 [43.7 MB] 058.Vue实战-17-测试 tasks(5) & 尝鲜TDD.mp4
 [108.3 MB] 050.Vue实战-09-测试 search&timer&promise&独居测试.mp4
 [135.1 MB] 063.Vue实战-22-测试 gotoLogin & 重构 router 测试逻辑.mp4
 [70.9 MB] 059.Vue实战-18-解决 indexedDB is not defined 报错.mp4
 [30.2 MB] 053.Vue实战-12-群居测试 search 功能.mp4
 [120.1 MB] 062.Vue实战-21-使用 TDD 的方式测试 router 模块.mp4
 [123.2 MB] 042.Vue实战-1.1-登录注册功能介绍.mp4
 [9.8 MB] 034.34-测试替身的类型-dummy-stub-spy-mock-fake.mp4
 [99.2 MB] 086.推箱子-20-实现动态设置地图的行和列-更新行.mp4
 [75.1 MB] 038.38-给测试命名的艺术.mp4
 [41.4 MB] 039.39-调用同一模块内的函数会 mock 失败.mp4
 [18.0 MB] 043.Vue实战-02-启动项目的方式.mp4
 [40.9 MB] 046.Vue实战-05-重构测试 useRouter 的代码 提炼公共 helper 函数.mp4
 [53.3 MB] 088.推箱子-22-实现拖拽批量设置地图.mp4
 [41.1 MB] 090.推箱子-24-实现显示当前选择的编辑元素.mp4
 [19.9 MB] 091.推箱子-25-实现放置箱子.mp4
 [74.1 MB] 052.Vue实战-11-测试 searchCommands.mp4
 [43.2 MB] 047.Vue实战-06-测试 window.open 的方式&重构整理 theHeader.mp4
 [64.4 MB] 049.Vue实战-08-测试 commandModal&键盘事件.mp4
 [121.0 MB] 084.推箱子-18-实现元素选择.mp4
 [135.7 MB] 048.Vue实战-07-第二个功能 command 搜索功能的介绍和代码实现.mp4
 [65.3 MB] 040.40-snapshot 快照测试.mp4
 [49.6 MB] 089.推箱子-23-实现放置玩家.mp4
 [58.6 MB] 035.35-独居测试和群居测试.mp4
 [67.9 MB] 036.36-测试的拆卸.mp4
 [58.7 MB] 051.Vue实战-10-测试 searchTasks & 测试 pinia.mp4
 [140.2 MB] 087.推箱子-21-实现动态设置地图的行和列-更新列.mp4
 [38.4 MB] 061.Vue实战-20-测试 http 模块.mp4
 [110.3 MB] 064.Vue实战-23-测试登录表单的正确方式-单元测试的三要点.mp4
 [93.1 MB] 073.推箱子-07-实现推箱子.mp4
 [129.3 MB] 065.Vue实战-24-使用 snapshot 测试表单 rule.mp4
 [22.1 MB] 069.推箱子-03-实现地图.mp4
 [63.3 MB] 067.推箱子-01-项目概述.mp4
 [39.8 MB] 075.推箱子-09-实现放置点的渲染.mp4
 [27.2 MB] 083.推箱子-17-实现地图编辑区.mp4
 [40.3 MB] 081.推箱子-15-地图编辑器概述.mp4
 [27.6 MB] 070.推箱子-04-实现玩家&移动.mp4
 [142.7 MB] 066.Vue实战-25-测试拖拽功能.mp4
 [98.8 MB] 077.推箱子-11-实现游戏通关的检测.mp4
 [72.2 MB] 079.推箱子-13-实现进入下一关-切换游戏数据.mp4
 [162.1 MB] 085.推箱子-19-实现动态设置地图的行和列-初始化.mp4
 [48.2 MB] 068.推箱子-02-初始化项目.mp4
 [29.6 MB] 080.推箱子-14-阶段性总结.mp4
 [37.7 MB] 082.推箱子-16-实现路由的切换.mp4
 [33.9 MB] 076.推箱子-10-实现箱子检测放置点.mp4
 [70.1 MB] 📁 2.资料 📁 front-end-testing-main 📁 docs 📁 guide 56-react-project.md [44.0 B] 25-tear-down.md [106.0 B] 54-oop-and-SOLID.md [126.0 B] 32-isolation-SUT.md [53.0 B] 43-the-lack-of-cohesion【整理不易‖记得关注：CunWorKNotes】.md [56.0 B] 33-low-levels-of-assertions【更多精选‖公众号：CunWorknotes】 .md [60.0 B] 15-verify-what.md [340.0 B] 06-write-first-unit-test.md [326.0 B] 26-test-only-one-focus【不易整理‖请关注：CunWorkNoteS】.md [164.0 B] 07-vitest-test-api.md [455.0 B] 02-automatic-thinking.md [195.0 B] 13-input-and-output.md [172.0 B] 16-test-double【持续更新‖免费提供：CunworknoteS】.md [226.0 B] 20-parameterized-test【更多精选‖公众号：CunWorknotes】 .md [100.0 B] 28-keeping-test-independent【持续更新‖免费提供：CunworknoteS】.md [194.0 B] 03-unit-test-definition.md [183.0 B] 09-vitest-vs-jest.md [205.0 B] 23-test-third-party-library.md [110.0 B] 08-vitest-debug.md [250.0 B] 22-test-api.md [95.0 B] 04-when-writing-tests.md [259.0 B] 01-why-write-testing.md [596.0 B] 00-introduction.md [1.7 KB] 05-why-not-write-tests.md [260.0 B] 12-where-put-test-data.md [223.0 B] 14-verify-way.md [112.0 B] 19-layer-test.md [147.0 B] 17-test-double-types.md [162.0 B] 10-mini-test-runner.md [205.0 B] 21-test-asynchronous.md [173.0 B] 18-setup-test-double.md [183.0 B] 11-to-prepare-data.md [259.0 B] 58-mini-vue-runtime-core-add-test.md [95.0 B] 35-magic-string.md [42.0 B] 42-the-fragile-test.md [59.0 B] 50-manual-debugging.md [98.0 B] 52-slow-test.md [38.0 B] 30-testable-design.md [121.0 B] 51-manual-intervention.md [96.0 B] 49-assertions-roller.md [80.0 B] 34-transition-assertion.md [39.0 B] 46-never-failed-test.md [47.0 B] 53-mature-and-not-repeat.md [44.0 B] 47-the-test-of-lying.md [113.0 B] 48-too-loose.md [75.0 B] 37-lengthy-installation.md [39.0 B] 55-vue3-project.md [46.0 B] 36-overprotective.md [39.0 B] 41-repetition.md [77.0 B] 59-tdd-args.md [64.0 B] 29-easy-and-read.md [109.0 B] 40-immaterial-details.md [47.0 B] 39-logical-division.md [57.0 B] 45-ambiguity-annotation.md [38.0 B] 24-test-date.md [102.0 B] 27-avoid-condition-test-logic.md [114.0 B] 31-use-the-front-door-first.md [87.0 B] 38-schizobulia.md [75.0 B] 44-comment-out-the-test.md [44.0 B] course-overview.md [8.1 KB] 57-vue3-tetris.md [94.0 B] 📁 .vitepress 📁 cache 📁 deps _metadata.json [269.0 B] vue.js.map [641.3 KB] vue.js [295.8 KB] package.json [17.0 B] 📁 theme MyLayout.vue [748.0 B] index.js [138.0 B] config.js [7.1 KB] 📁 components CVideo.vue [1.2 KB] 📁 public favicon.ico [15.0 KB] logo.png [304.6 KB] index【持续更新‖免费提供：CunworknoteS】.md [895.0 B] yarn.lock [29.9 KB] pnpm-lock.yaml [50.4 KB] README.md [1.7 KB] package.json [360.0 B] .gitignore [1.6 KB] 大纲+代码.txt [30.0 B]