先说说为什么要折腾自动化测试。现在前端项目动不动几十个页面，业务逻辑复杂得跟蜘蛛网似的。上次我改了个公共组件，结果导致三个页面崩了，测试妹子追着我骂了半个月。自从上了自动化测试，这种破事再没发生过。每次提交代码前跑一遍测试用例，心里踏实多了。
Jest+Testing Library这套组合拳是真香。Jest负责跑测试和断言，Testing Library专攻组件渲染和交互模拟。配置起来也简单，create-react-app创建的项目直接自带，不用折腾webpack那些破事。要是老项目，安装几个依赖就行：
写测试用例其实有套路可循。比如测试按钮点击后是否调了接口，可以这么搞：
异步操作测试经常让人抓狂。比如等接口返回后再检查页面显示，这时候就得用findBy方法：
自定义Hooks测试有个小技巧。用@testing-library/react-hooks这个包，测起来特别顺手：
项目大了测试运行慢怎么办？可以试试Jest的--watch模式，只跑改动的测试文件。要是还嫌慢，就用--coverage --watchAll=false只在CI环境跑全量测试。我们团队在GitHub Actions里配置了自动化流水线，每次push自动跑测试，失败了直接阻断合并。
测试覆盖率不是越高越好。有些团队非要追求95%以上，结果净测些没用的。重点应该放在核心业务逻辑和公共组件上，比如支付流程、表单校验这些关键路径。我见过有人连UI组件的margin都测，纯属浪费时间。
Mock技巧很重要。比如要模拟axios请求，可以这么搞：
遇到ReactRouter或Redux的组件测试，用Wrapper包一下就行：
最后给新人几个建议：别指望一次把测试全覆盖，先从核心功能开始；测试代码也要保持DRY原则，重复逻辑抽成helper；遇到诡异的时间问题就用jest.advanceTimersByTime()控制虚拟时钟。
自动化测试刚开始会觉得在浪费时间，等项目迭代两三版就知道它的好了。特别是半夜三点被报警短信吵醒的时候，你会感谢曾经认真写测试的自己。