前端利用github copilot辅助编写单元测试

一、前言

贴主对单测了解并不深入,本帖用于记录小白利用ai辅助编写单测过程和中途遇到的一些坑,希望能帮到大家

二、框架

  • 本次单测采用jest框架,因为jest的使用人数最多,社区资源最为丰富,前人的经验十分宝贵,后续如果vitest发展较好,也可以无痛进行迁移(vitest官方说二者使用体验基本一致)
  • ai方面采用github copilot,在vscode中安装插件并登录github账号即可,现在处于免费阶段,一个月一个账号限制50条消息(一个邮箱就可以注册一个号所以是完全免费)

三、配置

下面是一些基础配置,如果有缺失需要自己补充

package.json

json 复制代码
"scripts": {
    "test": "jest",
    "test:coverage": "jest --coverage"
 },

jest.config.js

css 复制代码
module.exports = {
 preset: 'ts-jest',
 testEnvironment: 'jsdom',
 transform: {
   '^.+\\.tsx?$': 'ts-jest',
 },
 moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

tsconfig.json

compilerOptions的types数组中加入"jest"

四、使用

选择copilot插件,打开需要编写单测的文件a.ts

全选a文件的内容然后在ai聊天框内输入生成单元测试即可,然后按照ai生成的步骤去创建对应文件贴入测试代码

完成后运行pnpm test:coverage,若存在报错可以直接复制报错信息扔给ai,ai无法解决则需要人工解决, 解决完报错后即可看到覆盖率报告,若测试代码较多可能无法一次全覆盖,需要告知ai多少行未被覆盖,进行二次生成

五、踩坑经验

  • 不要使用定时器,jest无法识别,会直接给里面的test跳过算通过
  • 有部分测试用例存在预期结果和实际结果不符合仍然显示通过,建议调整断言函数与应有结果不符合再次运行检查正确性
  • 不要在测试代码中使用try catch,无法识别
  • 红色是完全未覆盖到的部分,黄色是未覆盖的分支,解决完这部分才可以看到黄色的未覆盖到的分支,有些代码行有涉及覆盖但仍然被黄色标出说明该行有多种情况,已编写的单测用例没覆盖全,例如arr?.map涉及arr为Array型或undefined型
  • 想要看到某一个运行中的值建议使用console.error然后运行test脚本后再控制台中观察红色报错部分,console.log也可以但打印出来是白色的,容易被庞大信息流冲掉看不到
  • 外部导入的其他函数需要在jest中重新模拟
  • 单元测试不允许出现ts错误,如果有会运行不下去,如果要模拟异常情况可以使用断言(as any)避免ts报错
  • 测试类的时候遇到报错 xxx is not a constructor 参考www.javascriptcn.com/post/677b2b...
相关推荐
新world3 天前
mybatis-plus从入门到入土(二):单元测试
单元测试·log4j·mybatis
仰望星空@脚踏实地4 天前
Spring Boot Web 服务单元测试设计指南
spring boot·后端·单元测试
啃火龙果的兔子6 天前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
编程乐学(Arfan开发工程师)16 天前
75、单元测试-嵌套测试
前端·javascript·redis·python·单元测试·bootstrap
编程乐学(Arfan开发工程师)16 天前
73、单元测试-断言机制
服务器·数据库·servlet·单元测试·sqlite·log4j·mybatis
编程乐学(Arfan开发工程师)16 天前
74、单元测试-前置条件
redis·python·阿里云·单元测试·云计算·bootstrap
不一样的少年_16 天前
前端单元测试的救星:Vitest 输入和 Mock 技术详解
前端·单元测试
十连满潜16 天前
springboot集成mockito和jacoco实践
后端·单元测试·mockito
bo5210019 天前
vue3单元测试-项目实战
vue.js·单元测试
bo5210020 天前
vue3单元测试-初步了解
vue.js·单元测试