一、小程序中表单校验
二、单元测试与表单校验测试区别
文档描述:
单元测试(前端自己测)
测试工具函数本身是否正确
运行:npx jest
目标:验证 utils.js 里的校验方法逻辑没问题
输出:控制台绿色通过 / 红色失败
作用:保证代码不出错
表单校验(界面给到用户测)
在页面里调用校验方法,拦截错误输入
位置:小程序页面 .js
做法:import 引入工具函数 → 提交时调用
作用:防止用户填错、乱填,提前提示错误
个人:
单元测试 是使用创建的测试文件,针对until中定义的通用校验方法进行一次性批量测试,看控制台是否显示校验通过,而表单校验 就更简单一点,直接在提交表单的页面进行引入校验规则进行校验,从界面上看校验是否通过(更贴近主流组件封装校验规则写法),
三、总结(单元测试、表单测试、组件测试的底层实现)
A :Jest
1.专业定义Jest 是一个 JS 测试框架(测试运行器 + 断言库 + Mock 工具),负责:
查找测试文件
-
执行测试
-
输出结果
-
统计覆盖率
Jest = 跑测试的工具,相当于 "测试环境"。
B:describe
把一类功能放一起,比如:
describe (' 手机号校验 ')、
describe (' 密码校验 ') 让结果更清晰。
测试套件(Test Suite),用于对测试用例分组。
C: test
测试用例(Test Case),代表一个具体的测试场景。
简单理解一条 test 就是一个测试点:
正确手机号 → true
错误手机号 → false
D:expect
专业定义断言入口函数,用于获取实际结果,准备做比对。
简单理解expect (实际结果),它不判断对错,只是 "把结果拿出来"。
E:断言(toBe /toEqual 等)
1.概念:比对实际结果与预期结果是否一致。
2.举例说明:
bash
expect(validatePhone('13800138000')).toBe(true);
函数运行结果=true VS 我预期它=true
两者一致 → 通过 ✅
不一致 → 失败 ❌
断言 : 预期结果 === 实际结果
小总结 :
单元测试(工具函数、表单校验逻辑)
表单测试(本质还是单元测试)
组件测试(Vue/Angular/ 小程序组件)
底层用的全部都是同一套东西:以上A、B、C、D、E
