前端自动化测试精讲

news2024/12/24 22:03:42

单元测试 + 端对端测试 + 持续集成方案，在项目中落地前端自动化测试

作者介绍

祯民，字节跳动前端开发工程师，掘金小册《SSR实战：官网开发指南》作者，公众号「祯民讲前端」作者。曾负责抖音前端技术团队官网和字节官网中文版的开发，现维护抖音直播内容安全相关的业务，同时也是第五届字节跳动青训营《Nextjs实战项目》、《前端自动化》课程讲师，对前端自动化测试有长期的深入调研和思考，目前在给互娱中后台业务落地单元测试。

小册介绍

前端自动化测试精讲 - 祯民 - 掘金小册单元测试 + 端对端测试 + 持续集成方案，在项目中落地前端自动化测试。「前端自动化测试精讲」由祯民撰写，405人购买https://s.juejin.cn/ds/hp29XWB/

对前端开发而言，自动化测试的重要性不言而喻。对核心组件覆盖自动化测试，可以有效地保证组件功能的单一，起到警醒工程师的作用，而不至于让不同的业务代码相互耦合；新同学可以通过单测快速 get 到这个组件打算做什么、有什么能力，不论是后续的维护还是重构都会更有底气。

对于通用的基础建设，相比手工测试，自动化测试的覆盖率更有说服力，并且可以有效规避某次修改引起的历史功能的异常，从而保证整体功能的稳定。

想必大家也知道自动化测试的重要性。其实，对于前端工程师而言，最大的痛点在于，不知道该怎么去写对应的测试用例。

相比 Golang 、 Java 等纯后端逻辑的自动化测试，前端的自动化测试大部分需要模拟浏览器环境，进行对应 DOM 和事件效果的断言，测试的过程与常规逻辑的测试有所不同，很多同学想要针对组件进行测试也无从下手。

为此，我特意向 Semi 方向同学取经，一起探讨了如何有效地进行代码测试，并且向项目中进行推广。经过长达几个月的业务实践完善，综合未来趋势和单测稳定性等因素（具体会在2 | 技术选型：React Testing Library Or Enzyme？中详细介绍），在 Semi 测试方案选型上做出了更适合同学们学习的改进，技术选型上使用 Jest + React Testing Library + Cypress + Storybook。

Jest 是一个 JavaScript 集大成的测试库，是我们单元测试的基础，而 React Testing Library 则提供了一些 React Component 的 Api ，来协助我们进行 React Dom 和事件相关的单测编写。通过单元测试，我们只能覆盖组件中的除滚动外的大部分场景，对于一些复杂场景覆盖就会比较困难，而 Cypress + Storybook 则可以通过 E2E 端对端的方式帮我们弥补这部分覆盖的缺陷。

我将基于这套技术，来展开小册的内容，最终设计出如下的小册大纲，希望可以借此帮助同学们写出高质量代码，提高整体编程素质。

小册模块可以分为四个方向，单元测试 、端对端测试、持续集成、测试理论。

单元测试：我们将结合不同的案例来学习 Jest 的基础知识，并基于 React Testing Library 模拟浏览器 dom 和事件，对组件进行更加精准的自动化测试，这将是本小册最重点的学习内容，通过这部分的学习，大家将对大部分场景的自动化测试游刃有余。
端对端测试：我们将学习从用户视角进行对应的端对端测试，在这个模块，我们将使用业内主流的端对端测试方案 Cypress 进行用户操作的模拟，完善单测无法覆盖的复杂场景，比如滚动、页面跳转等。
持续集成：我们将站在项目视角，介绍如何将自动化测试覆盖到项目开发中，自动生成测试报告的内容。
测试理论：我们将深度思考如何善用自动化测试，不让它成为 kpi 的工具和工程师的负担。工欲善其事，必先利其器，去思考理解自动化测试的意义，结合项目的实际场景，才能真正实现提高整体项目代码质量和风格的初衷。

看过我上一本小册的同学应该大致了解我的写作风格，同样地，为了大家可以更好的理解理论知识，我将针对具体的场景，从零手写教学代码， 结合代码讲解对应的知识，每一节课如果涉及代码，将会在课程的最顶部加上对应仓库的链接，大家可以 clone 下来结合学习加深印象。