AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue中jest单元测试使用功能初探

2022-11-04 167
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍vue中jest单元测试基础功能的使用

安装jest

在使用脚手架创建vue项目的时候，我们可以选择使用jest单元测试

  1. 勾选使用单元测试

在这里插入图片描述
2.目录中会生成 example.spec.js 文件，也就是jest单元测试的文件

在这里插入图片描述

使用实例

这里循环出来了三个a标签

在这里插入图片描述
下面在jest单元测试中进行测试

在这里插入图片描述
如图这里是在jest配置文件中，这段单元测试的代码意思是找到a标签，看它是否有三个
使用 yarn jest 命令进行启动单元测试
在这里插入图片描述
如图所示运行的测试结果没有问题

我现在把a标签删除再来测试

在这里插入图片描述
可以看到测试不通过，并且反馈了比较详细直观的错误提示

今天给大家介绍了jest单元测试简单的功能使用方法，后面还会给大家继续带来相关的内容

文章标签：
JavaScript
测试技术
资源调度
关键词：
jest测试
单元测试功能
测试功能
VUE.js功能
vue测试
北海的大鱼
目录
相关文章
Dylaniou
|
1月前
|
运维
【运维基础知识】用dos批处理批量替换文件中的某个字符串（本地单元测试通过，部分功能有待优化，欢迎指正）
该脚本用于将C盘test目录下所有以t开头的txt文件中的字符串“123”批量替换为“abc”。通过创建批处理文件并运行，可实现自动化文本替换，适合初学者学习批处理脚本的基础操作与逻辑控制。
Dylaniou
134 56
土木林森
|
17天前
|
前端开发 数据管理 测试技术
前端自动化测试：Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试，Cypress则擅长端到端测试，模拟用户交互。通过结合使用这两种工具，可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
土木林森
34 2
游客zi3qmblbcdexu
|
17天前
|
JavaScript 测试技术 API
Jest进阶：测试 Vue 组件
Jest进阶：测试 Vue 组件
游客zi3qmblbcdexu
32 2
土木林森
|
18天前
|
前端开发 JavaScript 数据可视化
前端自动化测试：Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要，Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题，介绍Jest与Cypress的实战应用与最佳实践，帮助开发者提高测试效率和代码质量。
土木林森
28 2
夏天49597
|
20天前
|
前端开发 JavaScript 测试技术
React 模拟测试与 Jest
【10月更文挑战第21天】本文介绍了如何使用 Jest 进行 React 组件的单元测试和模拟测试，涵盖了基础概念、常见问题及解决方案，并提供了实践案例。通过学习本文，你将掌握如何有效地使用 Jest 提高代码质量和稳定性。
夏天49597
31 1
六卿
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境，包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件，并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
六卿
103 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
mao29955
|
1月前
|
JavaScript 前端开发 API
除了 Vue.js，还有哪些框架可以实现全屏显示功能？
【10月更文挑战第7天】
mao29955
23 1
mao29955
|
1月前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
mao29955
19 1
代码bug生产队
|
1月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
代码bug生产队
64 4
游客qsxez56gggwqy
|
1月前
|
测试技术
Appscan手工探索、手工测试功能实战
Appscan手工探索、手工测试功能实战
游客qsxez56gggwqy
36 4

热门文章

最新文章

  • 1
    测试开启MySQL performance_schema后对性能的影响
  • 2
    测试1——v$open_cursor视图和session_cached_cursors参数的关系
  • 3
    测试思维之用户名的（Label）标签
  • 4
    如何使ASP.NET MVC Controller易测试呢？
  • 5
    前端，测试如何修改后端接口返回的响应数据
  • 6
    jmeter测试教程
  • 7
    阿里文娱测试实战：机器学习+基于热度链路推荐的引流，让对比测试更精准
  • 8
    AB（apache benchmark）压力测试
  • 9
    网络游戏测试过程
  • 10
    测试Flask+PYTHON的WEB框架
  • 1
    vue(1)，小白看完都会了
    43
  • 2
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    146
  • 3
    Vue中避免滥用this去读取data中数据
    43
  • 4
    vue3服务端渲染警告解决----DefinePlugin
    120
  • 5
    vue中使用pinia及持久化
    60
  • 6
    Vue3与Vue2：对比分析与迁移指南
    394
  • 7
    双向数据绑定：Vue.js的魔法背后
    56
  • 8
    Vue class和style绑定：动态美化你的组件
    82
  • 9
    Vue 监听器：让你的应用实时响应变化
    199
  • 10
    vue3封装面包屑
    146

    • 相关课程

    更多
  • MSE微服务测试最佳实践 - 自动化回归
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Go语言核心编程 - 面向对象、文件、单元测试、反射、TCP编程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 移动互联网测试到质量的转变
  • 给ITer的技术实战进阶课-阿里CIO学院独家教材（四）
  • F2etest — 多浏览器兼容性测试整体解决方案

    • 相关实验场景

    更多
  • 快速上手并跑通AnalyticDB PostgreSQL版TPC-H测试
  • 灵活弹性的PolarDB Serverless确保数据业务持续在线
    • 下一篇
    阿里云OSS设置跨域访问