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

你会学到什么?

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

课程简介

对前端开发而言,自动化测试的重要性不言而喻。对核心组件覆盖自动化测试,可以有效地保证组件功能的单一,起到警醒工程师的作用,而不至于让不同的业务代码相互耦合;新同学可以通过单测快速 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 下来结合学习加深印象。

课程目录

开篇词:如何写前端的自动化测试?
技术选型:React Testing Library Or Enzyme?
Jest 断言:如何告诉程序什么是你的预期?
DOM 查询(上):页面元素的渲染和行为查询
DOM 查询(下):页面元素的参照物查询和优先级
DOM 断言:页面元素的断言
User-event:怎么对 Dom 组件绑定事件进行模拟触发?
Async 异步:异步方法如何进行单测?
FakeTimer:如何”快进”测试定时任务?
Mock:怎么替代不需要关注的逻辑?
RenderHook:怎么测试 React hook?
快照测试:怎么保障组件 UI 的完整?
深入原理:Jest 是怎么实现整个单元测试系统的?
E2E:怎么覆盖滚动等复杂交互场景的测试?
Coverage:自动化测试覆盖率的统计
CI:项目自动化测试的持续集成方案
最后的思考:用例的边界和深度究竟在哪里?

讲师介绍

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

(0)
上一篇 2023年3月7日 上午9:27
下一篇 2023年3月7日 上午9:38

相关推荐

发表回复

登录后才能评论