【Copilot极限实践日记】DAY 1: 使用Copilot实践不写一行代码快速生成unit test

alexxiyang

604人浏览 · 2025-03-01 15:57:26

alexxiyang · 2025-03-01 15:57:26 发布

这个系列之所以叫极限实践是因为我也不知道这是不是最佳实践。我现在尝试把ChatGPT用到极致，即几乎所有的具体编码或者写作都交由ChatGPT完成，看可以提升多少效率，或者降低效率。

名词介绍

Copilot

Copilot 就是微软出的使用ChatGPT的聊天机器人，你可以把它看作是ChatGPT的一种封装形式。你可以切换模型，目前可选的有Gemini，Claude和ChatGPT

Github Copilot

Github Copilot 是一款AI 编码助手。它把Copilot整合到了Github里面

Github Copilot 的 VSCode 插件

Github开发了Github的Copilot插件。该插件通过跟Github Copilot联网实现在IDE内使用Copilot帮助程序员编码。目前支持VSCode和Intellij。

任务要求

生成带UI界面的组件的unit test总是一件痛苦的事情。因为测试纯逻辑方法，只需要传入参数，验证输出就行了。但是测试组件需要你搭建很多组件加载需要的变量，并且用不同的方式来传给组件。今天是实践的第一天，我尝试让Copilot帮我生成一个Vue组件BenefitsAccordion的unit test。要求如下

需要在30分钟内完成
要求生成后的unit test可以运行通过
要求生成后的unit test符合一定的好的代码实践
我不需要写代码，只通过谈话完成这个任务

执行过程

Step 1: 初步生成测试用例

我打开了Copilot Edits面板

在这里插入图片描述

选中了这个文件，然后跟它说

/tests generate uni test for this file

在这里插入图片描述

它帮我生成了一个测试文件，但是它不知道我这个代码库是一个Monorepo代码库（单一代码库），生成的测试文件应该放在具体的子库下面。

Step 2: 移动测试用例

我让它把我的unit test移动到 apps/<子库>/tests/unit 下面。于是我说

@workspace app/xxx has its own tests folder. move the unit test you just generated to that folder instead of tests/unit

它说好，然后直接把文件丢到 /tests/unit 根目录下了

Move the unit test file for the BenefitsAccordian.vue component to the apps/xxx/tests/unit folder.

但是我们知道测试用例不会放到 /tests/unit 根目录下的，它应该被放到SUT（被测系统）组件的对应目录下的。比如我的SUT组件路径是 /src/components/ui/foo.vue 那么测试用例就应该放在 /tests/unit/components/ui/foo.spec.ts

Step 3: 再次移动测试用例

所以我再次叫它去移动测试用例，但是我不想直接告诉Copilot要把文件移动到那里。如果那样就太不AI了。所以我说

don’t put in the root of apps/ms/tests/unit. put it according to the source code file structure

它说

Move the unit test file for the BenefitsAccordian.vue component to the apps/ms/tests/unit/components/xxx/xxx folder to match the source code file structure.

这次还可以。总算移动到正确的位置了。但是文件里面很多错误

在这里插入图片描述

Step 4: 尝试修复测试用例

我尝试让它自己修复测试用例，毕竟只是把这些方法导入而已
我说

fix the errors in the unit tests file BenefitsAccordian.spec.ts

它说

Fix the errors in the unit test file for the BenefitsAccordian.vue component.

但是它没有做到。这些错误还是错误，不知道它干了啥

Step 5: 告诉它怎么修复

我只好告诉它怎么修复这些错误了。但是这些错误真的很低级，只是没有导入vitest的对应方法而已，我不理解为什么它做不到。我只好跟它直接说怎么修复了

the errors in BenefitsAccordian because you didn’t import describe, beforeEach, etc, from vitest

还好这次它知道错在哪里了

Fix the errors in the unit test file for the BenefitsAccordian.vue component by importing describe, beforeEach, it, and expect from vitest.

Step 6: 告诉它该生成什么方法的测试用例

我发现它生成的测试方法并不是特别的实用。或者说它没有遵循最佳实践，比如它生成了一些 it should render .. 测试方法。而我是一直反对写这种无意义的测试用例的。所以我只好直接告诉它应该生成哪些方法的测试用例，其他的测试方法都删掉

/tests in BenefitsAccordian.spec.ts, only generate unit testss for methods xxx, xxx, xxx, xxx, xxx, xxx, remove other unit test for other methods

它做的还可以

Generate unit tests only for the methods xxx, xxx, xxx, xxx, xxx, and xxx. Remove other unit tests.

Step 7: 分类测试方法

一个比较好的测试用例实践是要把针对某个方法的几个测试用例用describe来分组。比如针对方法 sayHello 我们写了几个测试方法，他们应该都被放到 describe('sayHello', () => {]) 里面，比如

describe('sayHello', () => {
    it('should say hello when ...');
    it('should say hello when ...');
    it('should say hello when ...');
    ...
})