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

一、前言

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

二、框架

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

三、配置

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

package.json

"scripts": {
    "test": "jest",
    "test:coverage": "jest --coverage"
 },

jest.config.js

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...