认识前端自动化测试、小程序中如何实现单元测试

一、什么叫自动化测试？

• 模拟真人用户的操作：点按钮、输内容、跳转页面、提交表单
• 检查页面有没有正常显示、接口有没有正常返回、流程能不能走通
• 一旦哪里崩了、报错了、文案不对了、接口挂了，自动化直接告诉你哪一步失败，不用再自己从头到尾点一遍，它帮你全跑了。

1. 简述：「站在用户角度测试功能完整性」精准命中了E2E（端到端）自动化测试的本质，区别于单元测试（站在代码角度）。

2. 自动化测试，对比常使用的单元测试

二、前端有必要学习自动化测试吗？

1. 大幅减少你自测、回归测试的重复劳动

   改完一个页面、一个组件，要反复点：登录、表单提交、按钮跳转、弹窗、列表加载， 这些重复点，自动化脚本跑一次只要 10 秒，你自己点要 几分钟。

2. 避免 "改一处、崩一片" 的线上事故

   改了登录 → 影响个人中心改了个人中心 → 影响列表改了列表 → 影响支付，自动化能自动跑一遍所有关键流程，哪里有报错你就知道了，为什么？他是站在用户使用角度去测试的，页面功能不正常了，你就很便捷去修改具体代码，其次就是你修改代码之前，已经跑通过整个业务链路并且已经写过自动化脚本，所以他知道执行步骤，如果出现问题就会及时反馈出来，不必人工方式去走一遍流程...

3. 让你从 "切图仔" 升级成 "工程化前端"

   这是高级前端和初级前端的分水岭，从代码层写测试脚本，节约直接使用页面手动测试效率（轻量级框架还好，特别是angular项目，用过的都知道随便修改一点东西自动刷新半天才看得到页面，特别是接口或网络不给力情况下，你就看着白屏页面等吧...），还有写测试脚本写的多了，自然封装组件的能力也会得到提升，因为考虑的广自然控件封装也知道兼容性好，

三、前端如何渐近学习自动化（从简单-难-学习过程）

1. 单元测试（Jest / Vitest）------ 最实用、最刚需

   测工具函数、公共组件、表单校验、工具类。→ 90% 前端都应该学会，对日常开发帮助最大。

2. 组件测试（Testing Library）------ 进大厂必备

   测按钮、表单、弹窗、下拉框等组件。

3. E2E 自动化（Cypress / Playwright）------ 最接近测试岗

   模拟用户真实操作：点击、输入、跳转、登录流程。→ 你转测试也靠这个，前端自己也能用。

4. 接口自动化（Supertest / Playwright 请求）

   测接口、登录、token、表单提交。

四、微信小程序中实现单元测试

（目前做小程序中，所以先说下这个）

1.渐近学习方向（简单-难）

A：工具函数测试 jest （先实践这个）

B：表单校验测试（登录注册必用）

C：公共组件测试（按钮 / 输入框 / 弹窗）

D：E2E 自动化（Cypress 模拟点页面）

E：写测试脚本一键跑所有用例

2.在小程序使用中，将工具函数进行脚本测试（纯逻辑单元测试），

2.1 搭建单元测试环境，安装jest

npm init -y
npm install jest --save-dev

2.2 创建后，写一点通用的手机号校验方法，然后在单元测试js中去配置脚本校验【是不是又想到了，专业测试写测试用例中的两个方法：等价类分法、边界值分析法 测试人员角度：等价类分法、边界值分析法的完整认识】

3.终端执行命令

npx jest

4.单元测试Jest， 测试用例 describe + test + expect 详解