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

前端测试这件事，难的不是写不出断言，而是不知道在一个真实项目里该测什么、测到哪一层、怎么让测试代码本身也能维护。这套资料围绕 Jest 展开，先把工具链用熟，再往 TDD 与 BDD 两条实践路线走，最后落到 Vue 与 React 的组件测试与集成测试上。如果你已经能写业务代码，但对「加个测试」始终停留在改一行断言就报错的阶段，这份资料适合拿来对照实践，而不是当作背景音看完。

先从 Jest 入手，而不是先背概念

资料的前半段把 Jest 当作独立的工具来讲：匹配器的行为、异步代码的几种测试写法、mock 与 spy 的边界、钩子函数的执行顺序、快照测试适合和不适合的场景。这些内容的价值在于它们都是可验证的——你写完一小段被测函数，立刻能跑出结果。建议的学习方式是在本地建一个空项目，把每个知识点都自己敲一遍，尤其是 mock 的几种粒度：模块级 mock、函数级 mock、定时器 mock，这三者在实际项目里出错率最高。

配置部分同样值得留意。Jest 与 Babel、TypeScript、各种前端构建工具的配合方式，决定了它能不能顺利接入你手头的项目。这部分不用背，理解配置项的来源即可，遇到报错时知道往哪个方向查。

TDD 与 BDD 是两种组织测试的思路

TDD 强调的是先写失败测试、再写实现、最后重构的循环。它对前端代码的约束力主要体现在纯逻辑层：工具函数、状态转换、数据格式化、业务规则校验。这些代码没有 DOM 依赖，测试写起来轻，反馈快，最适合用来练 TDD 的节奏感。

BDD 则把视角放在行为描述上，测试用例本身接近需求语言，关注的是「用户在什么场景下做了什么，应该看到什么结果」。放到组件层面，它更贴近真实交互。资料把这两条线分开讲、再分别落到框架里，这个结构比混在一起讲更容易建立判断：什么时候该用单元测试覆盖逻辑，什么时候该用行为测试覆盖交互。

落到 Vue 与 React 的组件与集成测试

框架部分是这套资料里最接近工程现场的内容。组件测试要处理的问题很具体：如何挂载组件、如何触发事件、如何等待异步更新、如何断言渲染结果、如何处理路由和状态管理带来的依赖。不同框架的测试工具在 API 上有差异，但思路是相通的——先隔离依赖，再模拟交互，最后验证输出。

集成测试部分更值得反复看。它涉及多个组件协同、数据流贯通、异步请求的处理。这里容易踩的坑是测试写得过于依赖实现细节，导致重构一次就大面积失败。资料中对测试粒度和断言对象的取舍，可以作为你自己项目里写测试时的参照标准。

怎么用这份资料

• 把 Jest 基础部分当作工具手册，边看边在本地跑通每个示例，不要只看不写。
• TDD 部分挑一个自己项目里的纯函数模块，完整走一遍红绿重构的循环。
• BDD 与框架部分建议对照一个已有的组件，先补测试再改代码，感受测试对重构的保护作用。
• 资料中的源码可以直接作为脚手架参考，重点看测试文件的组织方式与断言写法。

测试能力的提升不来自看完多少种测试类型，而来自你在真实代码里写过多少次「先让它失败，再让它通过」。这份资料提供的是结构清晰的练习场，剩下的靠动手。