Vue3单元测试
近来工作接触了一个有意思的东西,那就是Vue3的单元测试。虽说写起来费时费力,但是它确实可以让我们设计的组件更加健壮、更加合理且风险可控,同时编写单元测试也让我们更近一步理解组件的设计原理,好了废话不多说,直接开始吧。
快速开始
初始化一个vue3+typescript项目,移除不需要的内容
pnpm create vite
接下来是安装vitest,这是和vitest配合使用的测试框架,兼容jest,具体可参考官网
vitest中文官网
pnpm add -D vitest
再然后是安装一个测试Vue组件的库,是vue官方开发的,叫做@vue/test-utils,具体可参考官网@vue/test-utils官网
pnpm add -D @vue/test-utils
然后再安装一个模拟浏览器环境的库jsdom
pnpm add -D jsdom
最后让我们安装一个支持tsx语法的库,这一步不是必须的,但我喜欢tsx
pnpm add @vitejs/plugin-vue-jsx
配置环境
由于vitest是和vite可以结合的,所以这部分配置可以直接写到vite的config里面,前提是要在vite.config.ts中加入三斜线命令,这个在官网有特别提到。配置可以写入如下内容
打开项目,在vite.config.ts文件中写入如下内容,看注释
然后去packag.json文件中配置启动命令,模式,修改了马上自动测试,我不喜欢这个方式,配置一个命令行参数–watch==false 就可以关闭这种行为
编写第一个测试用例
打开vscode新建一个components目录并新增一个button目录,然后再建一个__test__目录放测试文件,elemetn-plus源码也是这样做的,在里面新建一个xxx.test.ts或者tsx的文件(没安装tsx就建ts文件)
然后再里面写入一个最简单的测试例子,如下图所示
这个例子非常简单,所使用的API都是从vitest中倒入,其中几个意思是
- describe 的意思是描述一个快,你可以认为是一个测试集合
- it 的意思是一个独立的测试区域,每个it应该负责单一的测试功能
- expect的翻译是断言的意思,就是断言这个内容是不是符合某个值或者某些行为
- toBe这里就是一个断言方式
所以上述例子的意思是断言1是不是等于1,答案显而易见是通过的,此时执行pnpm test将会得到如下结果
可以看到,一个文件通过,一个测试通过,现在让我们断言失败看看效果,我们尝试将toBe的内容改成2
从图中可以看到,这里说期望的是2,然后收到的是1,所以报错了,测试不通过
总结
环境配置非常简单,我看过网上的教程说jest配合vue使用是需要做额外的配置的,但是在vite中是无需额外的心智负担,只需要按照这简单的流程配置即可使用,vitest默认会检测项目中所有.test.ts或者.test.tsx等之类的测试文件,这个是可以修改的,具体配置可以参考官网去改。另外如果使用vscdoe的用户还可以装一个插件,这个插件安装了就不需要手动打命令。
题外
安装vscode扩展
然后就可以直接在代码里面点击左侧图标即可开始测试
不过这个插件现在有挺多bug,如果报错你可能需要去插件那里设置一下命令行,类似于这样
文章来源:https://www.toymoban.com/news/detail-498064.html
好了,本次的单元测试分享到此结束,下一节我们学习如何测试一个组件文章来源地址https://www.toymoban.com/news/detail-498064.html
到了这里,关于Vue3+Typescript+Vitest单元测试环境+基础用例篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!