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

最新推荐文章于 2024-08-23 20:47:13 发布
最新推荐文章于 2024-08-23 20:47:13 发布
阅读量540 收藏 1
点赞数
分类专栏： Vue 文章标签： Vue Jest 单元测试 example.spec.js DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45745641/article/details/125805327
版权

安装jest

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

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

在这里插入图片描述

使用实例

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

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

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

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

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

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

Beiyux
关注
专栏目录
Jest单元测试Vue项目实践
qq_42259940的博客
07-03 2369
实际上，jest.spyOn()是jest.fn()的语法糖，它创建了一个被spy的函数具有相同内部代码的mock函数。它模拟了一部分类似 jQuery 的 API，非常直观并且易于使用和学习，提供了一些接口和几个方法来减少测试的样板代码，方便判断、操纵和遍历 Vue Component 的输出，并且减少了测试代码和实现代码之间的耦合。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只需要知道它是否被正确调用即可，甚至会指定该函数的返回值。即toBe是===，toEqual是==
vue jest 测试_如何使用Jest测试框架测试Vue组件
08-16 2621
vue jest 测试Jest is a popular JavaScript testing framework that comes packed with a lot of goodies for developers. If you’re completely unfamiliar with how Jest works in general, I recommend you start ...
关于Vue中用jest测试
qq_48959471的博客
05-13 9098
1.jest是什么？ Jest是 Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。它能支持很多框架，比如Babel、TypeScript、Node、React、Angular、Vue等诸多框架。 2.jest的使用 ...
使用 Jest 测试 VueJS 组件（一）
龙哥盟
07-31 527
原文：zh.annas-archive.org/md5/fe8124600bcfb5515d84e359068f7e7c 译者：飞龙 协议：CC BY-NC-SA 4.0 前言 关于 本节简要介绍了作者以及本书涵盖的内容。 关于本书 在现代基于组件的 JavaScript 框架中进行单元测试并不简单。您需要一个可靠且运行迅速的测试套件。组件彼此相连，浏览器添加了一层 UI，这使得在测试组件时一切都相互依赖。Jest 是一个功能齐全的 JavaScript 测试框架，将为您完成所有工作。 本书向您展示了如
vue-jest vue3
vue+iview 动态渲染表格（vue.js结合iview插件）
11-24 941
vue3 jest
Vue+Jest 单元测试
arron4210的博客
06-10 2280
新到一个公司，要求单元测试覆盖率达50%以上，我们都是后补的单测，其实单测的意义是根据需求提前写好，驱动开发，代替手动测试。然鹅这只是理想。。。 这里总结一下各种遇到的单测场景 挂载组件，调用elementui, mock函数 ```javascript describe('页面验证', () => { const wrapper = getVue({ component: onlineFixedPrice, callback(Vue) { Vue.use(
详解使用jest对vue项目进行单元测试
10-18
为了在Vue项目中使用Jest，通常需要配置其运行环境，以便识别和处理不同类型的文件。 在Vue CLI 3.0及以上版本中，集成单元测试的配置变得更加简便。Vue CLI 3.0已经内置了对单元测试的支持，并提供了默认的jest...
vue项目使用Jest测试入门.docx
12-24
"Vue 项目使用 Jest 测试入门" 本文将为您介绍如何使用 Jest 进行 Vue 项目测试。Jest 是一个由 Facebook ...Jest 的优势在于其快照测试功能、安装配置简单、测试覆盖率工具和断言库，非常适合 Vue 项目的单元测试。
Jest 框架在 Vue 项目中的实践
最新发布
ljx11606的博客
08-23 773
深入探讨 Jest 框架在 Vue 项目中的使用，从而合理运用 Jest 实现对Vue项目的集成测试，极大地提高 Vue 项目的质量和可维护性，为项目的成功打下坚实的基础。
vue-jest-utils-使用Jest测试Vue.js组件的实用程序。-Vue.js开发
05-27
vue-jest-utils使用Jest测试Vue.js组件的实用程序。 尽管使用TypeScript编写（因此包括类型定义），但它也可以是u vue-jest-utils实用程序，用于使用Jest测试Vue.js组件。 尽管使用TypeScript编写（因此包括类型定义），但它也可以在纯JavaScript环境中使用。 免责声明：该项目目前正在开发中。 激励性的用例是结合使用Vue.js，TypeScript，Jest和html2jade简化快照测试。 将根据需要添加其他功能，并且可能会在发布1.0版之前对API进行重大更改。 贡献是
vue-cli 项目集成 Jest 单元测试
lhz_333的博客
03-23 3708
前端单元测试对于保证代码质量和稳定性是非常重要的。
Vue进阶（四十五）Jest集成指南
IT全栈 华强工作室
07-03 1023
在前期博文《Vue进阶（八十八）Jest》中，讲解了Jest基本用法及应用示例。一切顺利的话，按照文档集成应用即可，但是集成过程中遇到的问题可能五花八门，此篇博文主要分享Vue集成Jest阶段遇到的问题及解决方案。首先，需要确认项目自身环境参数配置，主要涉及babeljestbabel-jest，应用其中某个不合适的版本可能会导致各种嵌套问题出现，最终无法集成Jest。
vue and jest测试
weixin_30477797的博客
02-02 181
测试Vue的filters方法： 局部： import Page from '../src/Page' it('filter', () => { const case = Page.filters.toLowerCase('HI') expect(case).toBe('hi') }) 全局： Vue.options.filters.t...
使用 Jest 进行 Vue 单元测试
weixin_30314631的博客
09-26 838
本文介绍：1、vue-cli3下jest环境的搭建2、vue组件基本的测试方法 环境配置 vue-cli3 的插件使安装流程变得格外简单，通过 vue ui 启动可视化管理系统，在插件栏，点击 ‘添加插件’，搜索 @vue/cli-plugin-unit-jest，点击安装就可以了，对应命令行的 vue add @vue/cli-plugin-unit-jest 命令；这个过程实...
vue-jest vue （二）
vue+iview 动态渲染表格（vue.js结合iview插件）
12-21 199
2. jest文档：3.
vue单元测试-Jest
weixin_34294649的博客
09-22 695
vue接入单元测试Jest,配置花了点时间，相对于selenium+mocha+karma那套配置简单多了1.安装 npm install --save-dev jest @vue/test-utilsnpm install --save-dev vue-jestnpm install --save-dev babel-jestnpm i...
Vue提高篇五：使用Jest进行单元测试
我的博客
10-17 5361
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 文章目录系列文
Vue项目单元测试实践：Jest入门教程
"本文主要介绍如何为Vue.js项目添加单元测试，推荐使用Jest作为测试框架，并阐述了单元测试的重要性及Jest的优势。" 在软件开发中，单元测试是一种重要的质量保证手段，尤其是在复杂的前端项目中。Vue.js作为一款...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Beiyux

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值