用GPT 从0搭建 Jest 到帮写测试用例

本文作者为 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 打开文件夹，然后一边跟着操作。

开始

仓库都有什么

• 有从我们实际项目里剥离出的工程类配置文件，例如 .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 是基于这段代码你可以问些问题，但不在编辑框内生成代码。

我这里想让它直接帮我生成注释，便于辅助分析一下这个配置有哪些不妥（懒得看官方文档的这里集合

生成的是英文，先 Reject，看来辅助侧栏里面配置的在代码编辑框里并不共用，重新调整 Prompt 输入：

这一次 Accept：

这么读起来，虽然是祖传的配置，似乎看不出什么毛病，当然为了制作例子，其实是有所调整的，至少项目里的路径配的没问题，因此这里的配置也是模拟了一下，路径也没问题，基于此，我们开始让Cursor写用例，然后跑起来看看。