likes
comments
collection
share

用 vitest 替换 jest 只需要 10 分钟

作者站长头像
站长
· 阅读数 23

“崔哥 崔哥 你过来看看我发现了什么 一个叫做 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 分钟

用 vitest 替换 jest 只需要 10 分钟

”哈哈哈 太开心了 又通过了好多测试 “

“看来我们胜利在望了 ,还有几个报错 我们争取 2 分钟解决 “ 崔哥信心满满的说道

“好!”

“仔细看这个报错 它肯定是和 api 有关系的, 之前创建 stub function 的时候 是使用的 jest.fn ,但是现在肯定是没有 jest 了嘛“

“那难道说是用 vitest.fn()? ”

“哈哈哈 你猜错了 vitest 是把这些 api 都放到了 vi 里面”

用 vitest 替换 jest 只需要 10 分钟

所以我们把 jest.fn 换成 vi.fn 就大功告成

“给我键盘 我来我来 这个我也会” 小明赶紧把键盘抢过去

用 vitest 替换 jest 只需要 10 分钟

我们得需要先导入 vi

用 vitest 替换 jest 只需要 10 分钟

然后替换

用 vitest 替换 jest 只需要 10 分钟

”好了 崔哥 全部搞定 我们在来执行下测试“

用 vitest 替换 jest 只需要 10 分钟

“哇哇哇哇 搞定啦!!! 真的可以 10 分钟搞定呀 崔哥 感觉走走走 咱去喝一杯的” 小明开心的拍了拍他那小胖肚

用 vitest 替换 jest 只需要 10 分钟

“哈哈 这里就不得不说 vitest 的设计是非常的优秀和聪明的 之前使用 jest 的项目还是有非常多的 所以怎么才能吸引到这些用户呢?那么就是让他们替换变得简单 没什么学习成本 他们自然而然就会过来了 而这一点呢 就决定 vitest 的 api 应该如何设计”

”其实回想一下 vue 的发展 你会发现也是这样的 你设计出来的 api 一定要让别人学起来简单 不要让用户有过多的学习成本“

用 vitest 替换 jest 只需要 10 分钟

“秒秒秒 又学到了 走走走 咱边喝边聊 崔哥你必须再多给我讲一讲”