小程序中单元测试对比表单测试,及单元测试、表单测试、组件测试的底层实现原理

前言:小程序中单元测试的使用,点击查看

一、小程序中表单校验
二、单元测试与表单校验测试区别

文档描述:

单元测试(前端自己测)

测试工具函数本身是否正确

运行:npx jest

目标:验证 utils.js 里的校验方法逻辑没问题

输出:控制台绿色通过 / 红色失败

作用:保证代码不出错

表单校验(界面给到用户测)

在页面里调用校验方法,拦截错误输入

位置:小程序页面 .js

做法:import 引入工具函数 → 提交时调用

作用:防止用户填错、乱填,提前提示错误

个人:
单元测试 是使用创建的测试文件,针对until中定义的通用校验方法进行一次性批量测试,看控制台是否显示校验通过,而表单校验 就更简单一点,直接在提交表单的页面进行引入校验规则进行校验,从界面上看校验是否通过(更贴近主流组件封装校验规则写法),

三、总结(单元测试、表单测试、组件测试的底层实现)

A :Jest

1.专业定义Jest 是一个 JS 测试框架(测试运行器 + 断言库 + Mock 工具),负责:

查找测试文件

  1. 执行测试

  2. 输出结果

  3. 统计覆盖率

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

相关推荐
程序鉴定师8 小时前
西安App开发推荐与业界认可的优秀实践
大数据·小程序
qq_4352879211 小时前
第19章 十绝阵:十个独立沙箱环境?阐教逐个击破的渗透测试
渗透测试·单元测试·灰度发布·防御性编程·洪荒神话·十绝阵·沙箱环境
纤纡.14 小时前
HarmonyOS 鸿蒙 ArkTS 实战:从零开发生肖集卡抽奖小程序
华为·小程序·harmonyos·deveco studio
测试员周周15 小时前
【AI测试功能6】功能测试的自动化率:哪些该自动、哪些必须人工——AI测试人机协作决策指南
开发语言·人工智能·python·功能测试·单元测试·自动化·测试用例
我是伪码农15 小时前
小程序26-50
小程序
计算机学姐1 天前
基于微信小程序的图书馆座位预约系统【uniapp+springboot+vue】
vue.js·spring boot·微信小程序·小程序·java-ee·uni-app·intellij-idea
汽车仪器仪表相关领域1 天前
Kvaser Air Bridge Light HS:免配置工业级无线 CAN 桥接器,70 米稳定传输,移动设备与动态场景的 CAN 互联理想之选
人工智能·功能测试·安全·单元测试·汽车·可用性测试
焦糖玛奇朵婷1 天前
健身房预约小程序开发、设计
java·大数据·服务器·前端·小程序
Dragon Wu1 天前
Taro v4.2.0 scss使用“@/xxx“的配置方法
前端·小程序·taro·scss
WKK_1 天前
uniapp 微信小程序使用TextEncoder,arrayBufferToBase64
微信小程序·小程序·uni-app