工作笔记——使用Jest时遇到的一些问题

最近公司想要从mocha+karma的前端单元测试方式转换到Jest,然后任务就分配给我了,好吧,在这之前连单元测试是什么都不知道。硬生生的开始写单元测试了,写这篇文章的初衷是因为在配置Jest的过程

大家好,又见面了,我是你们的朋友全栈君。

  最近公司想要从mocha+karma的前端单元测试方式转换到Jest,然后任务就分配给我了,好吧,在这之前连单元测试是什么都不知道。硬生生的开始写单元测试了,写这篇文章的初衷是因为在配置Jest的过程中有好多问题,百度几乎搜索不到,无奈本人英文太差,却又不得不去看英文文档。然后,想要写篇文章,记录下其中遇到的一些问题以及解决问题的方法,当然,现在还有不少问题没有解决,等到解决了之后再来更新…orz。

  

一,QUICK START时遇到的问题

  首先,通过我们特别熟悉的命令,哦对,前提是你要安装了node,git。还要全局安装vue-cli,后面会把版本信息贴上的,这里不多说废话了。我们通过vue init webpack <yourname>命令来构建初始化的项目。不过在选择上,我们要选择Jest来做单元测试。

<span role="heading" aria-level="2">工作笔记——使用Jest时遇到的一些问题

  这样我们就得到了一个初始化,拥有Jest单元测试的项目了。版本信息如下:

<span role="heading" aria-level="2">工作笔记——使用Jest时遇到的一些问题

<span role="heading" aria-level="2">工作笔记——使用Jest时遇到的一些问题

   那么我们去试一下,查看package.json,我们发现启动单元测试的命令是npm run unit。哎?怎么报错了?嗯..你的报错信息应该可能大概也许是下面这个样子:

<span role="heading" aria-level="2">工作笔记——使用Jest时遇到的一些问题

  这是我们在使用Jest时遇到的第一个问题,解决的方式很简单,在test目录下的jest.config.js的配置中添加一项:

<span role="heading" aria-level="2">工作笔记——使用Jest时遇到的一些问题

  然后,再试一下npm run unit,我们发现测试通过了。至此,最基本的项目配置已经完成并顺利运行了。

  我们继续往下看。

二、通过script标签引入的插件无法找到的问题。

  我们先来想象一下这样的场景,我们在开发时候需要引入一个插件,就比如是百度地图API吧,但是又无法用npm install来安装(因为npm仓库没有这个库),所以我们在index.html中用script标签引入了BMap。就像这样:

<span role="heading" aria-level="2">工作笔记——使用Jest时遇到的一些问题

  接下来我们要在我们的项目中使用它,很简单,我们直接在初始化项目中的HelloWorld.vue中的mounted钩子里console.log(BMap)一下,在控制台中我们就可以看到一个对象,那么我们测试一下看看?

  果然报错了,BMap is not defined。

  在测试环境下,我们使用jest也需要引入开发环境下的各种插件,形成一个独立的环境体系,当然,我们也可以通过其它手段来造假数据。这个我们后面再说,既然找不到BMap,那么怎么办呢?

  jest的配置中有一个globals配置项,我们是否可以在它身上做点文章?

  首先在jest.conf.js中,我们可以在globals的配置项上加上一个名为BMap的对象,就像这样:

<span role="heading" aria-level="2">工作笔记——使用Jest时遇到的一些问题

  再运行一下测试,我们发现跑通了。但是可能还会有个问题,如果你在vue中用一个变量来暂存一个百度地图中的方法可能还会出现“找不到BMap.xxx”这样的错误。那么实际上,解决的方法也比较简单,给BMap对象下写入一个对应的方法就可以了。比如:

 <span role="heading" aria-level="2">工作笔记——使用Jest时遇到的一些问题

  就像这样,实际上就是为jest的全局环境挂载上相应的对象。但是,个人觉得这种方法有点取巧。并不是特别的好的处理方式,比如说我用了几十个方法难道要写几十个假的构造函数么?不过目前还没有找到更好的方法。这种处理方式还是比较简单易懂的。

  最后,如果我们想要给vue的单文件组件(通常我们用脚手架生成的项目都是这样的),还需要安装Vue Test Utils插件来帮助我们快速的完成测试用例的书写。

  实际上在使用过程中,主要有两类问题,一个是环境配置的问题,要记住在写jest测试用例的时候,需要引入各依赖的文件,就像在main.js中那样。另外一个就是在写实际具体的测试用例的时候所遇到的具体的语法写法等问题。比如vue-router,vuex,axios的使用方法等都是比较容易解决的部分,在网上可以很简单的搜到使用方法,我就不再重复的去写了。jest官网和Vue Test Utils实际上说的都比较清楚了。

2019-03-22更新:

  本以为在使用了globals配置项后可以比较妥善的解决全局环境变量的引入问题,但是在后续的单元测试编写的过程中会存在莫名其面的情况,就是偶尔会仍旧找不到全局环境下的BMap。

三、filecorverage未覆盖到的报错,虽然这种报错并不会影响你已经完成的单元测试的文件,但是会对覆盖率产生一定的影响,暂未解决。

四、复杂环境下经常会遇到各种对象找不到的情况,应该是jest测试环境的配置问题,暂未解决。

  最后,本文章为工作中遇到的问题的一些记录,以备查阅。若有错误不足,还望不吝指正,互相学习。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124402.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Layui弹出层关闭

    Layui弹出层关闭Layui弹窗关闭直接varindex=layer.open({…success:function(){layer.close(index);}})//获取当前窗口的namevarindex=parent.layer.getFrameIndex(window.name);//关闭窗口parent.layer.close(index);layer.closeAll();//疯狂模式,关闭所有层  layer..

  • 通用邮箱正则表达式[通俗易懂]

    通用邮箱正则表达式[通俗易懂]找了一些门户网站的邮箱格式:新浪:4-16个字符,可使用英文小写、数字、下划线,下划线不能在首尾。搜狐:4-16位,数字、小写字母、点、减号或下划线,小写字母开头。腾讯:由3-18个英文、数字、点、减号、下划线组成。网易:6~18个字符,可使用字母、数字、下划线,需以字母开头。谷歌:您可以使用字母、数字和英文句点,请勿使用除字母(a-z)、数字和英文句号外的其他字符。央视:6~20个字符,包括英…

  • 十大it博客_中国it名人

    十大it博客_中国it名人IT名人博客推荐(15个)1.李彦宏百度公司总裁博客地址:http://hi.baidu.com/liyanhong2.张朝阳搜狐董事局主席兼CEO博客地址:http://charles.blog.sohu.com/3.马云阿里巴巴集团主席兼首席执行官博客地址:http://yunma.blog.china.alibaba.com/4.雷军曾任金山…

  • SODA-大型活动大规模人群的识别和疏散:从公交2.0到公交3.0

    SODA-大型活动大规模人群的识别和疏散:从公交2.0到公交3.02019独角兽企业重金招聘Python工程师标准>>>…

  • ida反编译出来代码能直接用吗_xrl指令

    ida反编译出来代码能直接用吗_xrl指令IDAPro直接修改指令—以将jnz修改为jz为例子理清程序的逻辑后,采用最简单的办法控制程序的执行路径——修改指令。首先,通过菜单栏中Options/General/Disassembly/Numberofopcodebytes设置IDA使其显示指令的机器码。一般修改为16jnz的机器码为75,只需将其改为jz的机器码74。修改方法:Edit/Patchpr…

  • js正則表達式语法

    js正則表達式语法

    2021年12月10日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号