jset编写测试vue代码_详解使用jest对vue项目进行单元测试
最近领导对前端提出了新的要求,要进行单元测试。之前使用vue做了一个快报名小程序的pc端页面,既然要做单元测试,就准备用这个项目了,之前有些react的经验,vue还是第一遭
vue-cli3.0单元测试方面更加完备,就先升级到了cli3.0,因为项目是用typescript写的,需要ts-jest,得到jest的配置如下
{
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue",
"ts",
"tsx"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.tsx?$": "ts-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
],
"testURL": "http://localhost/"
}
}
先从简单的开始,测试了一个正则字符串常量文件,完美,一点问题没有
然后开始测方案页面的Scheme.vue组件,这个地方主要就想测一个computed属性,将三种有代表性的情况写完测试案例,兴冲冲运行yarn test:unit Scheme.test.ts,结果还不错,三个it测试用例都通过了,但后面还有一片红是什么鬼
console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Invalid prop: type check failed for prop "headerPic". Expected String, got Object.
原来是这个地方调用了一个组件,这个组件需要一个headerPic属性,用作图片的src,看源码
感觉没毛病啊,去vue-devtool,"/img/schemeSideNavPic.f988623b.jpg"是字符串啊,一点毛病没有,应该不是require的问题啊,应该是require在jest里面的处理问题,再查看jest配置,已经对jpg等静态文件做处理了,看了一下jest-transform-stub模块的源码,很简单
module.exports = {
process: function() {
return ''
}
}
既对这些静态文件返回空字符串,不做处理,这不就更不应该了呀,幸亏有vscode这款利器,可以方便调试源码,使用vscode调试没有报错,也没能让调试器进入vue文件,没办法,在ts文件里const pic = require('../../../assets/scheme/schemeSideNavPic.jpg'),再次调试,发现
正是jest-transform-stub的内容,确实是个对象,跟在命令行内运行结果一致,也就是说只需要一直处理方式让其返回为
module.exports = ""
查看jest官网,搜了一下css,运气不错
jset编写测试vue代码_详解使用jest对vue项目进行单元测试相关推荐
- filter vue 循环_详解在Vue.js编写更好的v-for循环的6种技巧
在vuejs中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环. 在最基本的用法中,它们的用法如下. {{ product.name }} 但是,在本文中,我将介绍六种方法 ...
- js定义全局变量 vue页面_详解Vue.js 定义全局变量的几种实现方式
详解Vue.js 定义全局变量的几种实现方式 发布于 2020-8-11| 复制链接 本篇文章主要介绍了VUE 全局变量的几种实现方式,小妖觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小妖 ...
- python代码测试工具模块_详解Python中的测试工具
当我们在写程序的时候,我们需要通过测试来验证程序是否出错或者存在问题,但是,编写大量的测试来确保程序的每个细节都没问题会显得很繁琐.在Python中,我们可以借助一些标准模块来帮助我们自动完成测试过程 ...
- python鸭制作类代码_详解duck typing鸭子类型程序设计与Python的实现示例
在程序设计中,鸭子类型(英语:duck typing)是动态类型的一种风格.在这种风格中,一个对象有效的语义,不是由继承自特定的类或实现特定的接口,而是由当前方法和属性的集合决定. 这个概念的名字来源 ...
- 确定最佳聚类数matlab代码_详解DBSCAN聚类
使用DBSCAN标识为员工分组 照片由Ishan @seefromthesky 在 Unsplash拍摄 基于密度的噪声应用空间聚类(DBSCAN)是一种无监督的ML聚类算法.无监督的意思是它不使用预 ...
- vue cli脚手架详解_vue-cli脚手架搭建vue项目搭建
在搭建项目前,需要确认系统是否已正确安装nodejs工具,建议node安装6.+以上的稳定版本,若这个最基本的配置已经完成了,就可以开始搭建项目了 1 进入到你想要创建项目的目录下,全局安装vue-c ...
- Vue CLI 脚手架详解:快速构建 Vue.js 项目的利器
目录 一.安装和创建项目 二.项目结构 三.开发和构建 四.插件和配置 Vue CLI 是 Vue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功 ...
- java学习 类变量 类方法_这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类变量(...
这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 类变量(static) 类变量是该类的所有对象共 ...
- 编程 ul 不能一行显示 跳到下行_史上最全的数控G代码编程详解
一.G代码功能简述 G00------快速定位 G01------直线插补 G02------顺时针方向圆弧插补 G03------逆时针方向圆弧插补 G04------定时暂停 G05------通 ...
最新文章
- InfoQ专访网易云陈谔:用微服务体系满足企业数字化转型需求
- 【Android 逆向】ELF 文件格式 ( ELF 程序头入口大小 | ELF 程序头入口个数 | ELF 文件节区头入口大小 | ELF 文件节区头入口个数 | 字符表序号 )
- 介绍三种将二进制字节字符转换为ASCII方法
- C语言 将整数写入内存指定的连续字节单元中
- SQL SERVER 数据库主键和外键的思考
- 双继承_在Python中使用双下划线防止类属性被覆盖!
- VC制作类似于IE4的酷工具条
- 百度在线解析站不限速下载
- crt怎么退出编辑模式_securecrt怎么退出当前指令
- ArcGIS案例学习笔记4_2_水文分析批处理地理建模
- Fujitsu(富士通)扫描仪——fi-6130z 无感安装设置
- 带宽总结:3dB带宽、零点到零点带宽、均方根带宽等
- 实现单个页面,多个百度分享(动态修改百度分享链接)
- opencv 修改图像像素
- 吟诵,不为吟诵 - 徐健顺
- 普通平键的主要尺寸有_普通平键的尺寸规范
- 大脑分区不是功能关键!Science封面4文连发:智慧从脑区间连接中诞生
- 【墨者学院】WebShell文件上传漏洞分析溯源(第2题)
- sap pp 详细讲解 生产结算 工单结算
- Word 2010 自定义首行缩进的快捷键
热门文章
- 写爬虫,不会正则怎么行?
- P1507 NASA的食物计划
- Python1217作业
- (转) Java线程同步阻塞, sleep(), suspend(), resume(), yield(), wait(), notify()
- Dell 笔记本的 BIOS设置 USB Wake Support 的设置
- 对象数组 排序-根据其中一个属性
- 2-16 HDO1106
- 可配置循环左右滚动例子
- Larbin 安装遇到的问题(fedora)
- UA MATH563 概率论的数学基础 鞅论初步9 分支过程简介