单元测试jest部署-程序员宅基地

技术标签: 运维  开发工具  测试  

引入jest需安装的基础插件:

基础插件

  • @babel/core
    说明:编译工具核心模块包
  • @babel/preset-env
    说明:编译工具,支持es2015特性的编译打包工具包
  • babel-jest
    说明:对.jsx、.js文件进行转义的包工具。
  • jest
    说明:jest单元测试模块包
引入jest的相关配置:

jest.config.js
若无jest.config.js,则执行jest --init,初始化jest的配置文件
修改如下配置:

moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"    //映射jssdk源码src的目录
  },
__babel.config.js__
module.exports = {
  presets: [
    ['@babel/preset-env', {    //配置babel预置编译器为@babel/preset-env
      targets: {
        node: 'current'
      }
    }]
  ]
};


JavaScript部署jest

安装插件:

参照文首【引入jest需安装的基础插件】

相关配置

参照文首【引入jest的相关配置】

TypeScript部署jest

安装插件:

1.安装jest基础插件
参照文首【引入jest需安装的基础插件】
2.安装适配TypeScript相关插件

  • @babel/preset-typescript
    说明:支持typescript的编译
  • @types/jest
    说明:在typescript中支持jest的afterAll、descript、test等关键字、断言等。
相关配置

基于文首【引入jest的相关配置】,配置babel.config.js
备注:只对应修改以下配置,勿粘贴覆盖。

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        node: 'current'
      }
    }],
    "@babel/preset-typescript"  //新增此配置
  ]
};


Vue部署jest

安装插件:

1.安装jest基础插件
参照文首【引入jest需安装的基础插件】
2.安装适配Vue相关插件

  • vue-jest
    说明:提供jest支持vue的转义
  • @vue/test-utils
    说明:提供jest操作vue的API
  • babel-core
    说明:由于vue-jest引用的是babel-core,而不是@babel/core,所以还需要添加上babel-core的依赖,无法无法执行。
  • jest-serializer-vue
    说明:jest中对vue的序列化插件。
  • @babel/plugin-transform-modules-commonjs
    说明:Jest在Node中运行,因此需要将ES模块转换为CommonJS模块。因此,如果您使用的是webpack 2,则很可能需要将Babel配置为仅在test环境中将ES模块转换为CommonJS模块
相关配置

jest.config.js
备注:只对应修改以下配置,勿粘贴覆盖。

  moduleFileExtensions: [
    "js",
    "json",
    "jsx",
    "ts",
    "tsx",
    "node",
    "vue"   //配置上vue的支持
  ],

  snapshotSerializers: [
    "<rootDir>/node_modules/jest-serializer-vue"           //配置添加上生成vue快照的序列化器的模块
  ],

  // A map from regular expressions to paths to transformers
  transform: {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",      //配置js文件的编译器
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"       //配置vue文件的编译器
  },

转载于:https://www.cnblogs.com/M-Silencer/p/11214478.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30710457/article/details/98954552

智能推荐

springboot校园新闻数据化系统 计算机毕业设计源码99293_数据挖掘与分析实训校园新闻管理系统-程序员宅基地

文章浏览阅读155次。本设计主要实现集人性化、高效率、便捷等优点于一身的校园新闻数据化系统,完成视频分享、学校荣誉、意见反馈、公告数据、论坛数据、新闻数据等功能模块。系统通过浏览器与服务器进行通信,实现数据的交互与变更。本系统通过科学的管理方式、便捷的服务提高了工作效率,减少了数据存储上的错误和遗漏。校园新闻数据化系统 使用Java语言,采用基于 MVVM模式的springboot技术进行开发,使用 Eclipse 2017 CI 10 编译器编写,数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介....._数据挖掘与分析实训校园新闻管理系统

基于JAVA桂林恒保健康防护有限公司官网计算机毕业设计源码+数据库+lw文档+系统+部署-程序员宅基地

文章浏览阅读70次。基于JAVA桂林恒保健康防护有限公司官网计算机毕业设计源码+数据库+lw文档+系统+部署。前端技术:Layui、HTML、CSS、JS、JQuery等技术。springboot物流车辆规费管理系统的设计与实现。ssm基于HTML的“守护萌宠”网站的设计与实现。ssm基于ssm+vue的高校个性化选课推荐。springboot通用项目的项目管理系统。ssm基于ssm架构的校园二手物品交易。

2024年环境科学,资源与材料化学国际会议(ICESRMC2024)_环境化学大会2024-程序员宅基地

文章浏览阅读301次,点赞5次,收藏9次。2024年国际环境科学、资源与材料化学会议(ICESRMC2024)将在中国三亚举行。ICESRMC2024会议主要关注环境科学、资源和材料化学,旨在为环境科学、能源和材料化学领域的专家学者提供一个国际合作与交流平台,分享研究成果,探索存在的问题和挑战,探索前沿技术。我们诚挚邀请国内外相关高校和研究机构的研究人员以及企业的工程技术人员参加会议。涉嫌抄袭的论文将不被出版。2024年环境科学,资源与材料化学国际会议(ICESRMC2024)本会议投稿经过2-3位组委会专家严格审核之后,最终所录用的论文将。_环境化学大会2024

Hadoop集群搭建(六):hadoop配置namenode服务_hadoop namenode -format未找到命令-程序员宅基地

文章浏览阅读9k次。 六:配置时间同步:找到虚拟机设置:点击选项--&gt;找到VMware Tools,打开时间同步即可: 注:如果你是创建一台虚拟机,其他几台都是这台克隆过去的,就可以不用配置时间同步也可以进行。 七:配置文件 1,进入hadoop配置文件目录:命令: 2,更改配置文件core-site.xml : 命令:..._hadoop namenode -format未找到命令

DNS详解-程序员宅基地

文章浏览阅读809次,点赞20次,收藏22次。DNS(Domain Name System,域名系统)是互联网中的一种分布式命名系统,用于将域名(例如example.com)转换为对应的 IP 地址(例如192.0.2.1)。它充当了互联网上的电话簿,将易记的域名映射到计算机可以理解的 IP 地址。:DNS 的主要功能是进行域名解析。当用户在浏览器中输入一个域名时,操作系统会向本地 DNS 解析器发送查询请求。本地解析器首先检查自己的缓存,如果缓存中没有找到对应的 IP 地址,则会向根域名服务器发送查询请求。

rocky linux 9.3 制作openssh 9.6 rpm包(含ssh-copy-id、openssl) —— 筑梦之路-程序员宅基地

文章浏览阅读899次,点赞9次,收藏11次。rocky linux 兼容红帽系列的操作系统,因此和redhat制作几乎没啥差别,这里主要添加ssh-copy-id命令和显示openssl版本。源码包和二进制rpm包见我的资源。

随便推点

致敬逆行者网页设计作品 大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载-程序员宅基地

文章浏览阅读71次。 抗击疫情致敬逆行者感人类题材、致敬逆行者网页设计作品、大学生抗疫感动专题网页设计作业模板、等网站的设计与制作。️抗击疫情致敬逆行者感人类题材网页设计作品采用DIV CSS布局制作,共多个页面:网站首页、感动人物、动人瞬间、感人视频、感动图集、感动新闻页面。,使用CSS设置了网页背景颜色,制作了导航区域鼠标经过荧光效果。个别页面插入了感人MP4视频。作品代码采用学生简单水平制作,DIV命名合理。 一套优质的网页设计应该包含 (具体可根据个人要求而定)网站布局方面:计划采用目前主流的.....

Unity Editor(一)OnInspectorGUI的重写与面板的创建-程序员宅基地

文章浏览阅读277次。Unity Editor(一)OnInspectorGUI的重写与面板的创建 http://blog.csdn.net/husheng0/article/details/52568027 posted on 2017-05-12 14:27 jiahuafu 阅读(...) 评论(...) 编辑 收藏..._unity editor oninspectorgui

红队打靶练习:DJINN: 1-程序员宅基地

文章浏览阅读395次,点赞11次,收藏8次。红队打靶练习:DJINN: 1,犹如赤狐突袭般的警觉感......

2024中国ESG传播趋势白皮书-程序员宅基地

文章浏览阅读434次,点赞9次,收藏3次。社会环境,以及技术环境系统性地归纳总结了中国及国外的ESG发展现状。国,存在一股“反ESG”的趋势,一些投资者持观点认为,ESG仅仅利于,并不能为投资。着,在公司层面分析ESG营销的作用,从消费者,到外部利益相关者,再到企业内部,将。国企业与国际组织合作是进行ESG传播和实践的有效方式,因此本文详细列举了与国际组。ESG因素逐渐被纳入企业发展及资本市场的核心考量之中。我们首先采用PEST模型对可持续发展的宏观环境进行分析,从政策环境,经济环境,织合作的方法和案例,希望能够启发更多的中国企业与国际组织合作。

[042] 微信公众帐号开发教程第18篇-应用实例之音乐搜索_音乐消息thumb_media_id是什么-程序员宅基地

文章浏览阅读8.1w次,点赞75次,收藏75次。引言及内容概要微信公众平台支持向用户回复音乐消息,用户收到音乐消息后,点击即可播放音乐。通过音乐消息,公众账号可以实现音乐搜索(歌曲点播)功能,即用户输入想听的音乐名称,公众账号返回对应的音乐(歌曲)。读者可以关注xiaoqrobot体验该功能,操作指南及使用如下所示。考虑到歌曲名称有重复的情况,用户还可以同时指定歌曲名称、演唱者搜索歌曲。下面就为读者详细介绍歌曲点播功能的实现过程_音乐消息thumb_media_id是什么

使用PyQt5/PySide2编写一个极简的音乐播放器_pyside2播放声音-程序员宅基地

文章浏览阅读3k次,点赞2次,收藏18次。文章目录一、创建UI界面二、获取网络歌曲三、创建和链接信号槽疫情肆虐,憋在家实在无聊,索性写点东西,于是就有了这个极极极极极简的音乐播放器。这个极极极简的音乐播放器类似于“阅后即焚”的软件,播放器可以随机播放歌曲,获取下一首歌曲,不能重新播放上一首歌曲,不能获取歌曲的名称和演唱者。听过的歌曲,就像过眼云烟,放完即散。下面来看看如何用Python实现这个音乐播放器软件吧!一、创建UI界面..._pyside2播放声音

推荐文章

热门文章

相关标签