最近公司想要从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. css常用单位

    css常用单位 本文来简单介绍下css的常用单位. 绝对长度单位 绝对长度单位代表一个物理测量. 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素.最终, ...

  2. 「HGOI#2019.4.19省选模拟赛」赛后总结

    t1-Painting 这道题目比较简单,但是我比较弱就只是写了一个链表合并和区间DP. 别人的贪心吊打我的DP,嘤嘤嘤. #include <bits/stdc++.h> #define ...

  3. BZOJ4036 按位或

    解:有两种做法...... 第一种,按照秘密袭击coat的套路,我们只需要求出即可.因为一种操作了i次的方案会被恰好计数i次. 那么这个东西怎么求呢?直接用FWT的思想,对于一个状态s,求出选择s所有 ...

  4. IIS运行一段时间不响应的解决方法

    查找事件记录,提示为应用程序池 'DefaultAppPool' 提供服务的进程关闭时间超过了限制 解决方案: Internet 信息服务(IIS)管理器->应用程序池->DefaultA ...

  5. 分享4个运维平台工具OSSIM、Ansible的学习思路

    对于当今企业安全来说,真正价值不在于亡羊补牢,也不在于一个或多个高危漏洞.企业在乎的是如何防患于未然,如何快速定位攻击,如何快速解决安全问题.OSSIM作为开源的安全信息管理平台,对于企业的需求来说毋 ...

  6. 2019南昌邀请赛网络预选赛 J.Distance on the tree(树链剖分)

    传送门 题意: 给出一棵树,每条边都有权值: 给出 m 次询问,每次询问有三个参数 u,v,w ,求节点 u 与节点 v 之间权值 ≤ w 的路径个数: 题解: 昨天再打比赛的时候,中途,凯少和我说, ...

  7. 如何清理Docker占用的磁盘空间?(转载)

    本文转载自https://blog.fundebug.com/2018/01/10/how-to-clean-docker-disk/ , 感谢原作者. 摘要:用了Docker,好处挺多的,但是有一个 ...

  8. k64 datasheet学习笔记39---Programmable Delay Block (PDB)

    0.前言 TODO 1.特性 TODO 4. 功能描述 4.1 PDB pre-trigger and trigger outputs PDB包含一个计数器,它的输出可以跟几个不同的数字值比较.如果P ...

  9. 命令操作MySQL数据库

    一.连接MYSQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1. 连接到本机上的MYSQL. 首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u roo ...

  10. noj算法 素数环 回溯法

    描述: 把1到20这重新排列,使得排列后的序列A满足:a. 任意相邻两个数之和是素数b. 不存在满足条件a的序列B使得:A和B的前k(0 <= k <= 19)项相同且B的第k+1项比A的 ...