本文作者为 360 数据平台部前端开发工程师
为什么要用AI写单测
这个问题分两点来说,第一是为什么要写单测,第二是为什么要用AI。
先来说为什么写单测,这很简单,我们项目或者说我们前端团队有公共模块,包含有组件类型、工具函数类型、hooks类型等,我们最大也是重点的项目,使用的技术栈是 React,因此这里说的 hooks 是指 react hooks,随着前端队伍壮大,开始考虑用开源的思路来维护这些代码,那么单测就是正规化的其中很重要一环。
至于第二点,主要是考虑提效,所以做一次尝试,项目里有祖传的 Jest 配置,但是具体需要什么依赖,需要根据所写的单测是什么类型,以及当前技术栈是什么版本,这就有一定搭建的学习成本,因此,本次设定为从0到1搭建 Jest 环境到跑通 AI 所写的用例。
使用的IDE
Cursor,版本0.2.5:
AI模型:
不是GPT-4
想要一直使用中文对话,可以这样配置:
点右上角的图标,打开辅助侧栏,点 MORE,然后告诉他,一直使用中文回答,这个配置目前只能有一条。
例子
Github仓库地址:
https://github.com/bdlite/hooks/tree/main
用来做例子的分支:
preview/previous
感兴趣的话可以一边 clone 下来,用 Cursor 打开文件夹,然后一边跟着操作。
开始
仓库都有什么
![93a5f80d023680e19933e8b8b64d9a1d.png](https://i-blog.csdnimg.cn/blog_migrate/7d1a59cf5c276ae919a3fd264eef24d0.png)
有从我们实际项目里剥离出的工程类配置文件,例如 .babelIrc、.gitignore、jest.config.js,配置项也只留取需要的
package.json 是使用 npm init 初始化的,生成过程略,涉及到要添加的包后文也会有提及
src 目录就是放源码了,es 目录是编译为 esModules 的制品路径,发布到 npm 用的是这个目录,因此单测也引用的这个目录
coverage 目录是 jest 自动生成的报告结果
__tests__ 目录是空的
看下祖传的jest.config.js
全选整段文件内容,会出现两个选项(这里的 Cursor 界面还有点小小的 bug),一个是 Edit,一个是 Chat,不同的是,Edit 可以直接帮你生成新代码或者改代码,Chat 是基于这段代码你可以问些问题,但不在编辑框内生成代码。
![74595b4d0fb64fdbaaecdcac7d37b003.png](https://i-blog.csdnimg.cn/blog_migrate/b36c80c576d6c3d356f50a1dd9257854.png)
我这里想让它直接帮我生成注释,便于辅助分析一下这个配置有哪些不妥(懒得看官方文档的这里集合
![bfc9fe9d6ddfd4264717a84c7daa2aed.png](https://i-blog.csdnimg.cn/blog_migrate/72aaf50e8c1e2ea51865981e4807922d.png)
![6f007afcc450c7656a8af3c1da42d453.png](https://i-blog.csdnimg.cn/blog_migrate/da6237f2f38dcbfb834bbd035f583912.png)
生成的是英文,先 Reject,看来辅助侧栏里面配置的在代码编辑框里并不共用,重新调整 Prompt 输入:
![8397d7b2387a4273f3ccd5e9cbbd32dc.png](https://i-blog.csdnimg.cn/blog_migrate/b1c2a85a29efa2ce2278ee6eb1cfcc9b.png)
这一次 Accept:
![7db25aaee827d3779d460b8a2d34331d.png](https://i-blog.csdnimg.cn/blog_migrate/a080d39533f4aba404b5888704ea8d7c.png)
这么读起来,虽然是祖传的配置,似乎看不出什么毛病,当然为了制作例子,其实是有所调整的,至少项目里的路径配的没问题,因此这里的配置也是模拟了一下,路径也没问题,基于此,我们开始让Cursor写用例,然后跑起来看看。