用 vitest 替换 jest 只需要 10 分钟

站长

2022年12月11日 06:33 · 阅读数 36

“崔哥崔哥你过来看看我发现了什么一个叫做 vitest 的前端测试框架，我知道你最近一直在探索前端测试领域你要是有研究过的话快给我讲一讲呗？” 小明一脸期待得看向崔哥

崔哥喝了口八二年的可口可乐说道 “害这必须研究过呀 vitest 现在非常的火热呢大有替换掉 jest 的趋势”

“噢是嘛？jest 现在不行了吗？要知道 jest 可是出自 facebook[1] 呀”

“现在国外已经有非常多的团队尝试从 jest 迁移到 vitest 上来了因为 vitest 足够的快而且是建立在 vite 之上的，其实这个也不用多说我给你举几个例子 ”

“你用 jest 的时候如果使用的是 ts 是不是要配置一堆乱七八糟的配置呀 ”

“是呀，当初我还吐槽过呢引入 jest 的时候给我配置的头都大了差一点就直接放弃了哦对了不只是 ts 用个 esm 都得配置苦不堪言呀”

用 vitest 替换 jest 只需要 10 分钟

“哈哈是的，这个就是 jest 劝退很多想要尝试写测试的一个点开始就困难模式谁受得了。而且不光如此你肯定也遇到过在业务中配置的东西到了 jest 里面还得在配置一份 ”

“可不是嘛要不很多同学都抱怨呢虽然知道写测试有好处但是谁有时间写测试呀光测试的环境都需要配置半天难顶得很呀 ”

“哈哈你说的这些问题在 vitest 中通通不用做，它开箱即用，直接就支持 esm 也支持 ts ，怎么说呢有点 webpack 和 vite 的感觉，一个是新时代一个是旧时代的咯“

”那我可是太期待了不如崔哥你带着我用 vitest 替换掉 jest 吧，我这不之前按照你的 mini-vue 也写了一个自己的 mini-vue 嘛还是使用的 jest 今天正好你带着我升级一下听说隔壁那条街开了个小酒馆味道很不错呢完事咱去喝两杯“

用 vitest 替换 jest 只需要 10 分钟

”哈哈哈哈那行那就开始吧从 jest 迁移到 vitest 学习成本四舍五入可以等于零 10 分钟我就带着你搞定“

”得嘞 10 分钟我可给你计时呢崔哥 “

”你这小子，来来来我们先打开你的 mini-vue ，第一步呢就是先把 vitest 安装一下咯“

pnpm i vitest -D

然后打开 package.json 修改里面的 test command ，把 jest 替换成 vitest

用 vitest 替换 jest 只需要 10 分钟

然后直接 pnpm test 命令来让报错指引我们下一步做什么

用 vitest 替换 jest 只需要 10 分钟

“嚯报了那么多错呀崔哥这咋指引我们做啥一般我看到这么多报错直接选择懵逼"

”你呀就是不知道报错有多幸福你按照他的报错一条条给解决就完了报错呢就相当于是指南针要是没有报错程序还跑不起来的话你就只剩下哭了“

”嘿嘿说的也是那种没有报错但是也运行不起来的 bug 实在是太可怕了那我们接下来干啥？“小明搓了搓小胖手一脸期待的问道

用 vitest 替换 jest 只需要 10 分钟

”看报错就好啦你看是不是提示 describe 这个函数没有那么我们就让它有就好了“

”咦？这里为啥 describe 会没有呢？噢我想起来了崔哥 jest 对于 describe、it 或者 expect 都是不需要 import ，是全局就可以使用的，所以我们可以直接用，那 vitest 不支持全局使用吗？“

”vitest 它默认的行为是需要你 import 的，但是也可以通过配置来支持全局使用。所以呀这里有两个选择要不我们在每个测试文件里面都 import 对应的函数要不就配置一下让它支持全局导入。哦对了我说了要 10 分钟搞定是吧那得了全局走起！”

“哈哈哈哈好嘞崔哥正好我想看看 vitest 的配置形式是什么样子的”

“没啥特别的前端所有的工具你发现没有都是创建一个 json 或者是 js 然后导出一个对象都是这一个套路，vitest 也不例外需要创建一个 vitest.config.ts ”

用 vitest 替换 jest 只需要 10 分钟

然后写上配置这里呢我们要使用 vitest 的 defineConfig 来创建然后给一个 test 再来一个小小的 globals 设置为 true 就搞定啦是不是搜依贼啦

用 vitest 替换 jest 只需要 10 分钟

“哈哈哈确实简单不过崔哥我钻个牛角尖为啥这里非要用 defineConfig 呀如果不用的话行不行”

用 vitest 替换 jest 只需要 10 分钟

“当然行呀其实这里的 defineConfig 的目的就是为了让你写配置的时候有智能提示，我们写 vue3 的 defineComponent 也是一样的道理 ”

“噢原来是这个作用 ” 小明在那摸着下巴回味着 “那看来我也可以学习一下这个技巧把它用到咱的项目中”

“你小子可以呀学完就想到应用场景了这个其实就是说为啥我们需要看源码向优秀的开源项目学习的原因吸收优秀的解决方案然后帮助我们解决业务问题提高效率，好了扯远了我们继续 ”

“这时候呢再来执行下测试命令 ”

用 vitest 替换 jest 只需要 10 分钟

“哎呀竟然有几个测试变绿了！看来我们成功了第一步呀” 小明一脸兴奋

“没错已经成功第一步了，接着我们再来看看下一步需要做什么事”

“哈哈哈崔哥我现在有点理解为什么说报错是好的是指南针了”

“这么快就悟了？这里它说理解不了 @mini-vue/shared 是个啥来我考考你知道这个问题应该如何解决嘛？或者说是怎么造成的呢”

“崔哥这个我还是知道一点点滴我来分析分析你看看对不对” 小明推了推他那一厘米厚的眼镜

“@mini-vue/shared 这个当初是在 tsconfig.json 里面配置过”

用 vitest 替换 jest 只需要 10 分钟

所以 ts 这边没有问题

用 vitest 替换 jest 只需要 10 分钟

而 vitest 理解不了是因为我们还没有告诉它应该如何解析这个路径

所以我们需要让他理解 @mini-vue/shared 对应的路径是哪里

这个之前在写 vite 的时候其实就是配置个 alias 别名，所以呀我们应该配置一下 alias

“哎呀分析的很到位嘛 vitest 的配置其实和 vite 的配置基本一样所以这里的 alias 你来配置这里多说一嘴呀其实 vitest 可以和 vite 共用一个配置这就解决了之前需要维护两套环境的配置了这也是 vitest 的一大特点”

“原来可以这样呀！那可真是太秒了现在我能理解为什么大家从 jest 转战 vitest 了这实在是太方便了之前维护两套环境配置可是太草了”

用 vitest 替换 jest 只需要 10 分钟

小明三下五除二就把 alias 的写好了

”写的还挺快的来解释解释这个配置的逻辑吧？“

”嘿嘿 alias 这里的配置和 tsconfig 那边不一样它只支持正则不支持 glob 的形式，所以我就给加了个正则当匹配到 @mini-vue/shared 的时候我们就需要把它替换成绝对路径了，而现在 mini-vue 又是采用的 monorepo 的架构所以在拼路径的时候我们需要取到 shared ，在写正则的时候加了括号，在 replacement 里面就可以通过 $1 来获取到值，这里还有个小小的 edge case的处理有的模块的叫做 runtime-dom，这种存在”-“的，只用 \w 是匹配不到的，所以就有了 ‘[\w-]’ 这样的话我们就可以得到一个完整的路径了“

”哈哈哈棒确实是这个逻辑来我们在执行一次测试看看报错有没有被解决“

用 vitest 替换 jest 只需要 10 分钟