首页 > 行业资讯 > 小册上新｜前端自动化测试精讲

小册上新｜前端自动化测试精讲

时间：2022-12-22 来源： 浏览：

小册上新｜前端自动化测试精讲

掘金小册 掘金小册
掘金小册

juejinxiaoce

掘金小册，一个小篇幅、高浓度、成体系、有收益的技术学习平台

收录于合集
#自动化测试 1 个
#工程师 34 个
自动化测试的重要性不言而喻。对核心组件覆盖自动化测试，可以有效地保证组件功能的单一，起到警醒工程师的作用，而不至于让不同的业务代码相互耦合；新同学可以通过单测快速 get 到这个组件打算做什么、有什么能力，不论是后续的维护还是重构都会更有底气。
对于通用的基础建设，相比手工测试，自动化测试的覆盖率更有说服力，并且可以有效规避某次修改引起的历史功能的异常，从而保证整体功能的稳定。
想必大家也知道自动化测试的重要性。其实，对于前端工程师而言，最大的痛点在于， 不知道该怎么去写对应的测试用例 。
相比 Golang 、 Java 等纯后端逻辑的自动化测试，前端的自动化测试大部分需要模拟浏览器环境，进行对应 DOM 和 事件效果的断言，这也是 QA 常称的 UI 自动化测试。而且，业内一直没有比较完善的教程可以供前端同学学习。
为此，小册作者特意向 Semi 方向同学取经，一起探讨了如何有效地进行代码测试，并且向项目中进行推广。经过长达几个月的业务实践完善，综合未来趋势和单测稳定性等因素，在 Semi 测试方案选型上做出了更适合同学们学习的改进，技术选型上使用 Jest + React Testing Library + Cypress + Storybook。
Jest 是一个 JavaScript 集大成的测试库，是我们单元测试的基础，而 React Testing Library 则提供了一些 React Component 的 Api ，来协助我们进行 React Dom 和事件相关的单测编写。通过单元测试，我们只能覆盖组件中的除滚动外的大部分场景，对于一些复杂场景覆盖就会比较困难，而 Cypress + Storybook 则可以通过 E2E 端对端的方式帮我们弥补这部分覆盖的缺陷。
这本小册将基于这套技术展开讲解，希望可以借此帮助同学们写出高质量代码，提高整体编程素质。

✦ ✦

01

作者介绍

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

1

单元测试 

我们将结合不同的案例来学习 Jest 的基础知识，并基于 React Testing Library 模拟浏览器 dom 和事件，对组件进行更加精准的自动化测试，这将是本小册最重点的学习内容，通过这部分的学习，大家将对大部分场景的自动化测试游刃有余。

2

端对端测试 

我们将学习从用户视角进行对应的端对端测试，在这个模块，我们将使用业内主流的端对端测试方案 Cypress 进行用户操作的模拟，完善单测无法覆盖的复杂场景，比如滚动、页面跳转等。

3

持续集成 

我们将站在项目视角，介绍如何将自动化测试覆盖到项目开发中，自动生成测试报告的内容。

4

测试理论 

我们将深度思考如何善用自动化测试，不让它成为 kpi 的工具和工程师的负担。工欲善其事，必先利其器，去思考理解自动化测试的意义，结合项目的实际场景，才能真正实现提高整体项目代码质量和风格的初衷。

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

✦ ✦

02

你将获得

小册将会从四个维度带大家学习自动化测试：
  • 使用 Jest + React Testing Library 来对浏览器 Dom 和事件进行模拟，掌握如何对组件场景进行前端的单元测试。
  • 使用 Cypress 进行用户视角的端对端测试，补全单元测试难以模拟的场景。
  • 对项目进行自动化测试覆盖率的覆盖，并进行测试报告的自动生成，将自动化测试融入代码开发中。
  • 对自动化测试的边界和深度有更深入的思考，因地制宜，结合项目场景去使用自动化测试，避免秀技和沦为 kpi 的自动化测试工具人。

✦ ✦

03

目标用户

这本小册适合有下面需求的同学来学习：
  • 不了解自动化测试，希望入门自动化测试的同学；
  • 有一定单测基础，但一直很困惑前端怎么进行环境模拟，不知道该怎么对 dom 和事件进行单测的同学；
  • 想系统了解怎么将自动化测试落地到自己项目的同学；
  • 对自己的项目代码不满意，觉得耦合度过高，对代码质量有自我追求的同学；
这本小册不会有过复杂的逻辑，考虑到受众，希望可以有更多的同学可以参与这部分的学习，所以会尽可能地减少技术栈对小册学习的限制，对学习小册的同学有下面这一条要求：
  • 熟悉 React 最佳，使用但并不涉及过多 React 语法，所以有扎实前端 JS 功底即可，最重要的是有一颗对代码追求极致的心。
现在购买，6 折特惠
12 月 21 日～12 月 28 日，上新 6 折特惠，原价 ¥ 29.9，现在仅需 ¥ 17.94 ～
赶紧 点击下方图片 ，一起加入学习吧！

-- END ---
我们的新订阅号正在持续活跃中，欢迎大家投稿和关注！

版权：如无特殊注明，文章转载自网络，侵权请联系cnmhg168#163.com删除！文件均为网友上传，仅供研究和学习使用，务必24小时内删除。
相关推荐
热门信息