前端要学的测试课 从Jest入门到TDD BDD双实战

前端写测试这件事，很多人卡在同一个地方：知道该写，但不知道从哪下手，写了一堆断言又觉得没测到点子上。这门课解决的就是这个断层——它不跟你谈测试多重要，而是直接把你按在 Jest 上跑通第一个用例，再往 TDD 和 BDD 两条线上带。

它对应的工作场景很具体

如果你正在维护一个组件库、一个中后台项目，或者接手了别人留下的老代码，改一处崩三处——这门课的内容就落在这些场景里。它要处理的问题包括：怎么给工具函数和业务逻辑写单元测试，怎么在 Vue 或 React 组件里验证渲染和交互，怎么用集成测试覆盖一条完整的用户操作链路，以及怎么在写代码之前先把测试写好。

换句话说，它不是让你背 API，而是让你在「改代码心里没底」的时候，有一套能自己验证的手段。

学完能独立做什么

• 能配置 Jest 环境，给纯函数、工具模块、异步请求逻辑写出可维护的测试用例；
• 能用 TDD 的方式推进一个小功能：先写失败用例，再补实现，最后重构；
• 能用 BDD 的思路描述业务行为，把「用户能看到什么、点了会发生什么」翻译成可执行的测试；
• 能在 Vue 和 React 项目里做组件测试和集成测试，而不是只停留在单测层面；
• 能判断一段代码值不值得测、该测到什么粒度，而不是盲目追求覆盖率数字。

这些能力够你在团队里承担「把测试补起来」这件事，也够你在面试里讲清楚 TDD 和 BDD 的区别与取舍。

资料的组织方式与基础要求

内容按两条线推进：一条是 Jest 基础，从环境搭建、匹配器、异步测试到 mock，节奏偏工具入门；另一条是 TDD 与 BDD 的实战，分别落在 Vue 和 React 的具体场景里做集成测试。两条线不是割裂的，基础部分学到的断言和 mock 手法，在后面框架实战里会反复用到。

适合有前端基础、写过 Vue 或 React 项目的人。如果你完全没接触过组件开发，框架那一章会有点吃力；如果你已经写过一些测试但不成体系，这门课正好帮你把零散经验串起来。纯零基础的前端新手可以先跳过框架实战，只跟 Jest 和 TDD 部分。

使用建议

别把它当视频连续剧刷。每学完一个测试手法，就在自己手头的项目里找一个函数或组件试写一遍，哪怕只写两三个用例。TDD 那部分尤其要动手，光看会觉得「这不就是先写测试吗」，真写起来才会遇到「测试太依赖实现细节」这类问题，而这恰恰是这门课想让你踩到的坑。

资料里附带的示例可以对照着跑，但不要停在跑通。跑通之后改一改断言、删掉一个 mock，看测试怎么失败——理解失败信息，比理解成功通过更有价值。