Vue3+Typescript+Vitest单元测试环境+基础用例篇

这篇具有很好参考价值的文章主要介绍了Vue3+Typescript+Vitest单元测试环境+基础用例篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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文件中写入如下内容,看注释

Vue3+Typescript+Vitest单元测试环境+基础用例篇
然后去packag.json文件中配置启动命令,模式,修改了马上自动测试,我不喜欢这个方式,配置一个命令行参数–watch==false 就可以关闭这种行为
Vue3+Typescript+Vitest单元测试环境+基础用例篇

编写第一个测试用例

打开vscode新建一个components目录并新增一个button目录,然后再建一个__test__目录放测试文件,elemetn-plus源码也是这样做的,在里面新建一个xxx.test.ts或者tsx的文件(没安装tsx就建ts文件)
Vue3+Typescript+Vitest单元测试环境+基础用例篇
然后再里面写入一个最简单的测试例子,如下图所示
Vue3+Typescript+Vitest单元测试环境+基础用例篇
这个例子非常简单,所使用的API都是从vitest中倒入,其中几个意思是

  • describe 的意思是描述一个快,你可以认为是一个测试集合
  • it 的意思是一个独立的测试区域,每个it应该负责单一的测试功能
  • expect的翻译是断言的意思,就是断言这个内容是不是符合某个值或者某些行为
  • toBe这里就是一个断言方式
    所以上述例子的意思是断言1是不是等于1,答案显而易见是通过的,此时执行pnpm test将会得到如下结果
    Vue3+Typescript+Vitest单元测试环境+基础用例篇
    可以看到,一个文件通过,一个测试通过,现在让我们断言失败看看效果,我们尝试将toBe的内容改成2
    Vue3+Typescript+Vitest单元测试环境+基础用例篇
    从图中可以看到,这里说期望的是2,然后收到的是1,所以报错了,测试不通过

总结

环境配置非常简单,我看过网上的教程说jest配合vue使用是需要做额外的配置的,但是在vite中是无需额外的心智负担,只需要按照这简单的流程配置即可使用,vitest默认会检测项目中所有.test.ts或者.test.tsx等之类的测试文件,这个是可以修改的,具体配置可以参考官网去改。另外如果使用vscdoe的用户还可以装一个插件,这个插件安装了就不需要手动打命令。

题外

安装vscode扩展
Vue3+Typescript+Vitest单元测试环境+基础用例篇
然后就可以直接在代码里面点击左侧图标即可开始测试
Vue3+Typescript+Vitest单元测试环境+基础用例篇
不过这个插件现在有挺多bug,如果报错你可能需要去插件那里设置一下命令行,类似于这样
Vue3+Typescript+Vitest单元测试环境+基础用例篇

好了,本次的单元测试分享到此结束,下一节我们学习如何测试一个组件文章来源地址https://www.toymoban.com/news/detail-498064.html

到了这里,关于Vue3+Typescript+Vitest单元测试环境+基础用例篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vitest 单元测试

    自动化测试是指 使用独立于待测软件的其他软件或程序来自动执行测试,比较实际结果与预期 并生成测试报告这一过程。在测试流程已经确定后,测试自动化可以自动执行的一些重复性但必要的测试工作。也可以完成手动测试几乎不可能完成的测试。 1. 基于图形用户交互界

    2024年01月21日
    浏览(43)
  • Vitest 单元测试详解

    一、 自动化测试 (TDD)的一些概念: 自动化测试(TDD)概念: 自动化测试是指 使用独立于待测软件的其他软件或程序来自动执行测试,比较实际结果与预期 并生成测试报告这一过程。在测试流程已经确定后,测试自动化可以自动执行的一些重复性但必要的测试工作。也可

    2024年02月20日
    浏览(33)
  • Vitest 单元测试方案

     🔥 交流讨论: 欢迎加入我们一起学习! 🔥 资源分享 : 耗时200+小时精选的「软件测试」资料包 🔥  教程推荐: 火遍全网的《软件测试》教程   📢 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! 简介 Vitest 是一个面向 Vite 的极快的 单元测试 框架。它利用了 Vite 的

    2024年04月08日
    浏览(38)
  • 【白盒测试】单元测试的理论基础及用例设计技术(6种)详解

    目录 🌞前言 🏞️1. 单元测试的理论基础 🌊1.1 单元测试是什么 🌊1.2 单元测试的好处 🌊1.3 单元测试的要求 🌊1.4 测试框架-Junit4的介绍 🌊1.5 单元测试为什么要mock 🏞️2. 单元测试用例设计技术(6种) 🌊2.1 语句覆盖 🌊2.2 判定覆盖【也称分支覆盖】 🌊2.3 条件覆盖

    2024年04月27日
    浏览(40)
  • 年轻人的第一款单元测试框架———vitest

    一款合格的开源项目是避免不了单元测试的,这也是这几年单元测试的热度居高不下的原因。而在今年的 state of js 2022 中,我们可以看见在 代码库层级列表 中, vitest 飞升一跃,直接到了第二名,仅次于同门师兄弟 vite ,而 element plus unocss 等知名开源项目都采用了vitest进行单

    2024年01月17日
    浏览(47)
  • 【vitest 单元测试】如何蹭 ant-design-web3 的PR

    这篇文章分享单测经验,希望你能收获到有用的单测知识或者pr思路,填补单测的过程可以深刻理解组件内部的每一个流程,相信一定有所收获。 最近刚好在做一些单测覆盖的工作,在排查执行不到的地方的过程,可以梳理整个组件执行的脉络,甚至发现一些可以优化组件的

    2024年01月16日
    浏览(37)
  • TypeScript基础篇 - Vue-TS-Rollup 环境实战

    目录 .babelrc Rollup+Vue+TS scripts/rollup.config.js package.json 可以同时使用多个 Plugin 和 Preset,此时,它们的执行顺序非常重要。 先执行完所有 Plugin,再执行 Preset。 多个 Plugin,按照声明次序顺序执行。 多个 Preset,按照声明次序逆序执行。 比如 .babelrc配置如下,那么执行的顺序为:

    2024年02月16日
    浏览(44)
  • 测试用例-单元测试

    本文主要针对如何使用Junit编写单元测试进行描述 文中的实例基于Junit 4 接口测试 单元测试 只能以接口为维度进行测试 只需被测试的单元逻辑正常即可 工程必须编译通过并打包进行部署 可以不依赖外部,测试进度不再受制于外部条件 工程的外部依赖(数据库、调用的服务

    2023年04月09日
    浏览(31)
  • VectorCAST单元测试手动配置测试用例

    一、单元测试 等待环境创建完成后,就可以开始单元测试。 二、生成测试用例 在 VectorCAST 中,一共有两种方法来生成测试用例,一种是手动生成测试用例,另外一种是自动 生成测试用例。 三、手动生成测试用例         在 VectorCAST 中,手动生成测试用例,需要根据函数

    2024年02月12日
    浏览(36)
  • “一个测试用例是否为单元测试”的争议

    “一个测试用例是否为单元测试”的争议 Google看到测试领域中这种“百家争鸣”的现象后,创立了自己的命名方式,将测试分为 小型测试、中型测试和大型测试 ,而单元测试是小型或中型测试的具体实现形式。具体如下表: 小型测试 中型测试 大型测试 单元测试 单元测试

    2024年02月12日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包