最近公司想要从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时遇到的一些问题的更多相关文章

  1. 2016年第2周读书笔记与工作笔记 scrollIntoView()与datalist元素

    这一周主要是看了html5网页开发实例与javascript 高级程序设计,供以后翻阅查找.  html5网页开发实例第1章与第二章的2.1部分: 第1章内容: html5在w3c的发展史. 浏览器的 ...

  2. 《工作笔记:移动web页面前端开发总结》

    工作笔记:移动web页面前端开发总结 移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (I ...

  3. javascript - 工作笔记 (事件四)

    在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装,  JavaScript Code  12345   yx.bind(item, "click&quo ...

  4. 工作笔记3.手把手教你搭建SSH(struts2+hibernate+spring)环境

    上文中我们介绍<工作笔记2.软件开发经常使用工具> 从今天開始本文将教大家怎样进行开发?本文以搭建SSH(struts2+hibernate+spring)框架为例,共分为3步: 1)3个 ...

  5. Sencha Touch2 工作笔记

    Sencha Touch2 工作笔记 Ext.dataview.List activate( this, newActiveItem, oldActiveItem, eOpts ) Fires whe ...

  6. 工作笔记5.JAVA图片验证码

    本文主要内容为:利用JAVA图片制作验证码. 设计思路: 1.拷贝AuthImageServlet.class图片验证码 2.配置web.xml 3.JSP中,调用封装好的AuthImageServl ...

  7. 工作笔记--对接三方Http接口遇到的问题

    在使用 HttpClient 4.4 调用第三方 http api 时遇到了很多问题,还好最后都解决了,记录一下遇到的问题及解决办法,希望对同样有此问题的你有所帮助. 环境说明 首先说明一点是,对方的 ...

  8. 读书笔记——《MySQL DBA 工作笔记》

    关于前言 作者在前言中提出的一些观点很具有参考价值, 梳理完整的知识体系 这是每一个技术流都应该追逐的,完整的知识体系能够使我们对知识的掌握更加全面,而不仅仅局限于点 建立技术连接的思维,面对需求,永 ...

  9. 【工作笔记】BAT批处理学习笔记与示例

    BAT批处理学习笔记 一.批注里定义:批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD,这些命令统称批处理命令. 二.常见的批处理指令: 命令清单: 1.RE ...

随机推荐

  1. [M$]微软提供的ProcessExplorer等系统工具集合

    https://docs.microsoft.com/en-us/sysinternals/downloads/index

  2. Python【第二篇】运算符及优先级、数据类型及常用操作、深浅拷贝

    一.运算符及优先级 Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 1.算数运算符 运算符 描述 实例,a=20,b=10 + 加 a+b输出结果30 - 减 a-b输出结果 ...

  3. 51Nod--1247 可能的路径(gcd)

    根据规则可知 假设 (a,b) 可以到达坐标(aa,bb) 那么 aa=a*x+b*y  x y 必定有解  所以 我们只要求两个坐标的gcd看是否相等就好 #include<bits/stdc ...

  4. Springboot 6.Springboot 返回cookies信息的验证和post接口开发及常见错误解决

    在介绍之前先将一个小插件:lombok  ,在prefrence里面点击plugins,然后搜索lombok,进行install就可以了 首先将pom文件里面的lombok引进来 <depend ...

  5. LVM备份(1)-创建LVM逻辑卷

    LV(Logical Volume) - 逻辑卷 VG(Volume Group) - 卷组 PV(Physical Volume) - 物理卷 1.查看分区信息:fdisk -l 可看到磁盘大小为1 ...

  6. 导出python的环境

    1.导出 pip freeze >  packegas.txt 2.在其他环境安装 pip install -r  packages.txt

  7. DirectX11--深入理解HLSL常量缓冲区打包规则

    HLSL常量缓冲区打包规则 DirectX11 With Windows SDK完整目录 欢迎加入QQ群: 727623616 可以一起探讨DX11,以及有什么问题也可以在这里汇报. 尽管打包规则并不 ...

  8. 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式

    一. 背景 说起EF的增删改操作,相信很多人都会说,有两种方式:① 通过方法操作  和  ② 通过状态控制. 相信你在使用EF进行删除或修改操作的时候,可能会遇到以下错误:“ The object c ...

  9. 如何使用多数据源,同时使用jpa和jdbctemplate

    spring: datasource: first: type: com.alibaba.druid.pool.DruidDataSource url: jdbc:mysql://xx.xx.xx.x ...

  10. 有关于 java native方法

    看java源码时,经常看到native方法后,就没有具体的是实现了. 以前一直有疑惑,今天查了查,看到前辈们的博文才明白: Java的native方法http://blog.csdn.net/wike ...