工作笔记——使用Jest时遇到的一些问题
最近公司想要从mocha+karma的前端单元测试方式转换到Jest,然后任务就分配给我了,好吧,在这之前连单元测试是什么都不知道。硬生生的开始写单元测试了,写这篇文章的初衷是因为在配置Jest的过程中有好多问题,百度几乎搜索不到,无奈本人英文太差,却又不得不去看英文文档。然后,想要写篇文章,记录下其中遇到的一些问题以及解决问题的方法,当然,现在还有不少问题没有解决,等到解决了之后再来更新...orz。
一,QUICK START时遇到的问题
首先,通过我们特别熟悉的命令,哦对,前提是你要安装了node,git。还要全局安装vue-cli,后面会把版本信息贴上的,这里不多说废话了。我们通过vue init webpack <yourname>命令来构建初始化的项目。不过在选择上,我们要选择Jest来做单元测试。
这样我们就得到了一个初始化,拥有Jest单元测试的项目了。版本信息如下:
那么我们去试一下,查看package.json,我们发现启动单元测试的命令是npm run unit。哎?怎么报错了?嗯..你的报错信息应该可能大概也许是下面这个样子:
这是我们在使用Jest时遇到的第一个问题,解决的方式很简单,在test目录下的jest.config.js的配置中添加一项:
然后,再试一下npm run unit,我们发现测试通过了。至此,最基本的项目配置已经完成并顺利运行了。
我们继续往下看。
二、通过script标签引入的插件无法找到的问题。
我们先来想象一下这样的场景,我们在开发时候需要引入一个插件,就比如是百度地图API吧,但是又无法用npm install来安装(因为npm仓库没有这个库),所以我们在index.html中用script标签引入了BMap。就像这样:
接下来我们要在我们的项目中使用它,很简单,我们直接在初始化项目中的HelloWorld.vue中的mounted钩子里console.log(BMap)一下,在控制台中我们就可以看到一个对象,那么我们测试一下看看?
果然报错了,BMap is not defined。
在测试环境下,我们使用jest也需要引入开发环境下的各种插件,形成一个独立的环境体系,当然,我们也可以通过其它手段来造假数据。这个我们后面再说,既然找不到BMap,那么怎么办呢?
jest的配置中有一个globals配置项,我们是否可以在它身上做点文章?
首先在jest.conf.js中,我们可以在globals的配置项上加上一个名为BMap的对象,就像这样:
再运行一下测试,我们发现跑通了。但是可能还会有个问题,如果你在vue中用一个变量来暂存一个百度地图中的方法可能还会出现“找不到BMap.xxx”这样的错误。那么实际上,解决的方法也比较简单,给BMap对象下写入一个对应的方法就可以了。比如:
就像这样,实际上就是为jest的全局环境挂载上相应的对象。但是,个人觉得这种方法有点取巧。并不是特别的好的处理方式,比如说我用了几十个方法难道要写几十个假的构造函数么?不过目前还没有找到更好的方法。这种处理方式还是比较简单易懂的。
最后,如果我们想要给vue的单文件组件(通常我们用脚手架生成的项目都是这样的),还需要安装Vue Test Utils插件来帮助我们快速的完成测试用例的书写。
实际上在使用过程中,主要有两类问题,一个是环境配置的问题,要记住在写jest测试用例的时候,需要引入各依赖的文件,就像在main.js中那样。另外一个就是在写实际具体的测试用例的时候所遇到的具体的语法写法等问题。比如vue-router,vuex,axios的使用方法等都是比较容易解决的部分,在网上可以很简单的搜到使用方法,我就不再重复的去写了。jest官网和Vue Test Utils实际上说的都比较清楚了。
2019-03-22更新:
本以为在使用了globals配置项后可以比较妥善的解决全局环境变量的引入问题,但是在后续的单元测试编写的过程中会存在莫名其面的情况,就是偶尔会仍旧找不到全局环境下的BMap。
三、filecorverage未覆盖到的报错,虽然这种报错并不会影响你已经完成的单元测试的文件,但是会对覆盖率产生一定的影响,暂未解决。
四、复杂环境下经常会遇到各种对象找不到的情况,应该是jest测试环境的配置问题,暂未解决。
最后,本文章为工作中遇到的问题的一些记录,以备查阅。若有错误不足,还望不吝指正,互相学习。
工作笔记——使用Jest时遇到的一些问题的更多相关文章
- 2016年第2周读书笔记与工作笔记 scrollIntoView()与datalist元素
这一周主要是看了html5网页开发实例与javascript 高级程序设计,供以后翻阅查找. html5网页开发实例第1章与第二章的2.1部分: 第1章内容: html5在w3c的发展史. 浏览器的 ...
- 《工作笔记:移动web页面前端开发总结》
工作笔记:移动web页面前端开发总结 移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (I ...
- javascript - 工作笔记 (事件四)
在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装, JavaScript Code 12345 yx.bind(item, "click&quo ...
- 工作笔记3.手把手教你搭建SSH(struts2+hibernate+spring)环境
上文中我们介绍<工作笔记2.软件开发经常使用工具> 从今天開始本文将教大家怎样进行开发?本文以搭建SSH(struts2+hibernate+spring)框架为例,共分为3步: 1)3个 ...
- Sencha Touch2 工作笔记
Sencha Touch2 工作笔记 Ext.dataview.List activate( this, newActiveItem, oldActiveItem, eOpts ) Fires whe ...
- 工作笔记5.JAVA图片验证码
本文主要内容为:利用JAVA图片制作验证码. 设计思路: 1.拷贝AuthImageServlet.class图片验证码 2.配置web.xml 3.JSP中,调用封装好的AuthImageServl ...
- 工作笔记--对接三方Http接口遇到的问题
在使用 HttpClient 4.4 调用第三方 http api 时遇到了很多问题,还好最后都解决了,记录一下遇到的问题及解决办法,希望对同样有此问题的你有所帮助. 环境说明 首先说明一点是,对方的 ...
- 读书笔记——《MySQL DBA 工作笔记》
关于前言 作者在前言中提出的一些观点很具有参考价值, 梳理完整的知识体系 这是每一个技术流都应该追逐的,完整的知识体系能够使我们对知识的掌握更加全面,而不仅仅局限于点 建立技术连接的思维,面对需求,永 ...
- 【工作笔记】BAT批处理学习笔记与示例
BAT批处理学习笔记 一.批注里定义:批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD,这些命令统称批处理命令. 二.常见的批处理指令: 命令清单: 1.RE ...
随机推荐
- 虚拟机网络配置和NFS
Test Env: Ubuntu 16.04 VMware 克隆虚拟机 A 把一台虚拟机从一台服务器克隆到另一台服务器,拷贝.vmx(配置文件)和.vmdk文件,然后在新服务器的vmware直接打开. ...
- Tomcat 服务器
1 相关概念 1 软件的架构 1 c/s 客服端/服务端 2 b/s 浏览器/服务器 2 资源的分类 1 静态资源 所有用户访问后 得到的资源是一样的 称为静态资源 html css js 静态资源可 ...
- mysql中replace替换字符串更改方法
MySQL中update替换部分字符串replace的简单用法 近日,遇到了需要将部分字符串替换为另外的字符,平时用的最多的是直接update整个字段值,在这种情况下效率比较低,而且容易出错.其实my ...
- CMDB资产管理系统开发【day26】:admin action
本节目标 审核写到数据库,我就单独写一个如下的 页面 单机go后就跳转到如下图界面,我们这节课的目标就是写一个这样的页面 asset\admin.py部分代码 注释如下: class NewAsset ...
- kubernetes云平台管理实战: 自动加载到负载均衡(七)
一.如何实现外界能访问 外界访问不了 1.启动svc [root@k8s-master ~]# cat myweb-svc.yaml apiVersion: v1 kind: Service meta ...
- DUMP3.5 企业级电商项目
购物车模块 加入商品 更新商品数 查询商品数 移除商品 单选/取消 全选/取消 购物车列表 [浮点型商业运算精度丢失问题]ej1st 一书提到 float double只适合科研计算,BigDeci ...
- PL/SQl编程 基本语法
/*输出hello world*/ DECLARE BEGIN DBMS_OUTPUT.PUT_LINE('Hello World'); END; --set serveroutput on; /** ...
- IP、端口及远程服务器
- (一)校园信息通微信小程序从前端到后台整和笔记
前段时间接触了微信小程序,现在回过头来做一些笔记. 先上效果图 后台数据管理界面(PHP) 校园信息通微信小程序前端界面 下面先简单的说一下怎样部署一个微信小程序 首先是前端 微信小程序有它专门的开发 ...
- ve2.0 v-for循环报错的解决方案
<li v-for="(item,index) in mokeData" class="page" :key="index"> ...