学习笔记——在vue中如何配置Jest(一)

最近在搞Jest单元测试,如何在vue中安装和使用jest我就不说了,前一篇文章简单的说了一下在使用jest时遇到的一些问题,但是我觉得并没有真正的解决的很好。后面会在学习过程中更新前面的那篇文章,加

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

  最近在搞Jest单元测试,如何在vue中安装和使用jest我就不说了,前一篇文章简单的说了一下在使用jest时遇到的一些问题,但是我觉得并没有真正的解决的很好。后面会在学习过程中更新前面的那篇文章,加入后续遇到的问题以及解决问题的方法,持续的做一个记录。

  好了,废话不多说,咱们开始今天的内容吧。因为之前使用jest时候的项目是移植过来的项目,因为复杂的环境以及外部文件引入的等等等等的问题。采用的方式就是新建一个空的vue-cli生成的用jest来做单元测试的项目,这就导致了测试环境的配置是极为脆弱的。而且还有十分大的隐患。但是又没办法一下子解决。所以,我想在这篇文章中,整理记录一下jest的配置参数的用法等。

  jest的配置文件是单独生成在unit文件夹下的一个独立文件,并没有和vue-cli生成的webpack构建的环境相关联。所以个人感觉这样更清爽一些吧。

一、默认配置文件参数的意义

  我们先来看一张图,然后我一一介绍说明他们都是用来做什么的:<span role="heading" aria-level="2">学习笔记——在vue中如何配置Jest(一)

  这是当前版本的vue-cli生成的jest.conf.js的配置文件,我们可以在package.json中的配置项里看到,我们在npm run unit 的时候,真正运行的就是这个文件的配置。

  前面的文章说过了,要添加一个testURL来解决找不到localstorage的问题。并且修改mapCorverage为collectCorverage,前者是旧版本的参数。

  那我们接下来一一介绍每个参数的配置及其含义。

  rootDir:其实就是指整个项目的根目录,也就是最外层的目录。这里多句嘴,再解释下path.resolve(__dirname,”../../”)的意义,他最终返回的结果是该问见所在的根目录,简单来说__dirname返回的是当前目录,再向上两层,就是整个项目的根目录了。

  moduleFileExtensions:这个文档解释的是“模块使用的文件扩展名数组,从左往右查找这些文件”。实际上我的理解,这个参数的意义就是让jest知道你需要测试覆盖的文件的扩展名都是什么。

  moduleNameMapper:一种正则表达式到模块名的映射,匹配到的文件的内容可以是空的。我理解的是,可以通过该参数,来mock一些图片,css等静态资源文件,因为我们在测试的时候实际上是不太需要这些文件的,但是有需要引入它作为环境上的依赖。

  transform:简单来说就是转换器,正则匹配到的文件可以通过对应模块的转换器来解决一些未来版本语法时可以使用它。通过正则来匹配文件,为匹配到的文件使用对应的模块。

  snapshotSerializers:快照测试的插件,会生成测试文件的一个快照版本,可以再package.json中查看安装的快照插件。

  setupFiles:运行一些测试环境所要依赖的模块的路径列表,比如引入vue,elementUI等插件的列表,以给测试提供完整的环境。

  collectCoverage:是否收集测试时的覆盖率信息。

  testURL:该选项是设置jsdom环境的参数。

  coverageDirectory:jest输出覆盖率信息文件的目录。

  collectCoverageFrom:为数组中匹配的文件收集覆盖率信息,即使并没有为该文件写相关的测试代码,需要将collectCoverage设置为true,或者通过–corverage参数来调用jest。

 

  这样我们就解释完了基础配置的参数,学习过后,我们对jest的配置有了一个基本的了解。但是要想写单元测试文件,还是远远不够的。下一篇文章,我会介绍如何在为vue的单文件组件写测试用例。并且解释说明一下我在使用jest时候的一个疑问,什么是localVue,shallowMount与mount与localVue的区别是啥?localVue与Vue的区别是啥?那么今天就到这里啦…

  

  参考:https://jestjs.io/docs/en/getting-started

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

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

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

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

(0)


相关推荐

  • 深度学习—2.常见的神经网络结构

    深度学习—2.常见的神经网络结构

  • linux 实时查看日志 最新最后100行 tail「建议收藏」

    linux 实时查看日志 最新最后100行 tail「建议收藏」(1)实时查看日志文件tail-f日志文件名(2)只查看日志文件后100行tail-f-n100日志文件名(3)搜寻字符串grep‘搜寻字符串’日志文件名按ctrl+c退出————————————————版权声明:本文为CSDN博主「wanghai76」的原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:http…

  • Android View中OnKeyListener的onKey返回值

    Android View中OnKeyListener的onKey返回值1.前言在调试Android原生Setting开始中,遇到DialogPreference中用遥控器操作SeekBar到100%时,再按一次右键SeekBar焦点会跳至确定按钮中去。正常现象应该是停留至SeekBar尾部。2.问题分析根本原因就是焦点变化了,当SeekBar为100%时,再按一次右键让焦点停留再当前位置即可。进一步分析就是对按键进行处理,当满足条件时,使系统不再处理这个按键。3.原生代码片段在View.java中/***Interfacedefin

  • 2010年最有价值做的16个广告联盟是_cpa广告联盟怎么做

    2010年最有价值做的16个广告联盟是_cpa广告联盟怎么做2010年最有价值做的16个广告联盟本篇文章来源于优乐智慧传媒-网络创富门户|www.youle668.cn原文链接:http://www.youle668.cn/article/20100326/71.html2010年谷歌退出中国内地,许多站长朋友一下子束手无策了,因为大多数人之前都是依靠adsense生存的,现在一下子说要走了,还真不知道怎样才好,其实也没必要太担心,所谓条条大路通…

  • 图片格式WEBP全面解析[通俗易懂]

    图片格式WEBP全面解析[通俗易懂]前言不管是PC还是移动端,图片一直是流量大头,以苹果公司Retina产品为代表的高PPI屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值且值得探索的事情。但如今对于JPEG、PNG和GIF这些图片格式的优化几乎已经达到了极致,若想改变现状开辟新局面,便要有釜底抽薪的胆量和气魄,而Google给了我们一个新选择…

  • Jmm模型_fgls模型

    Jmm模型_fgls模型一、什么是JMM模型Java内存模型(即JavaMemoryModel,简称JMM)本身是一种抽象的概念,并不真实存在,它描述的是一组规则或规范,通过这组规范定义了程序中各个变量(包括实例字段,静态字段和构成数组对象的元素)的访问方式。由于JVM运行程序的实体是线程,而每个线程创建时JVM都会为其创建一个工作内存(有些地方称为栈空间),用于存储线程私有的数据,而Java内存模型中规定所有变…

发表回复

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

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