vue-test-utils初使用详解


Posted in Javascript onMay 23, 2019

vue-test-utils官网:https://vue-test-utils.vuejs.org/zh/

jest官网:https://jestjs.io

依赖包

请安装它们?

yarn add @vue/test-utils vue-jest
yarn jestjest-serializer-vue
yarn add babel-jest babel-core@^7.0.0-bridge.0

⚠️:vue-jest依赖与babel-core。我们的环境现在都是babel7,通过npm安装的babel-core默认的还是6版本,所以要指定babel-core安装的系列为7,否则会出现解析问题。

配置

jest配置:告诉jest它需要哪些额外的配置

jest相关的配置可以配置在package.json中或者单独的jest.config.json文件中:

// jest.config.json
{    
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest", // jest使用babel解析js
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" // jest对vue单文件的解析
  },
  "snapshotSerializers": [
    "<rootDir>/node_modules/jest-serializer-vue"
   ],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1", //为了解析webpack配置的alias字段
    "^tim-architect/(.*)$": "<rootDir>/tim-architect/$1"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!(yourModuleName))"
  ]
}

⚠️:transformIgnorePatterns的默认配置是["node_modules"],表示所有的node_modules下的包都不需要babel解析。但是一些3rd库提供的文件仍然是未编译的es6语法,jest在解析时会报语法错误。因此需要指定白名单,需要那些node_modules下的包被babel转换。

babel配置:告诉babel你需要用哪些工具去处理一坨(?香么 ?? : ? )代码

推荐使用babel.config.js(babel需要转换的node_modules同样生效)而不是.babelrc(当前项目生效)。

{
  ...,
 env: {
  test: {
   presets: [[
    '@babel/env',
    {
     modules: 'auto', // 现在不能通过webpack来解析s6 module,需要使用babel来解析,所以要开启
     targets: {
      node: 'current' // 指定环境为当前node版本,减少解析不识别语法的范围
     }
    }
   ]],
   plugins: [[
    '@babel/plugin-transform-runtime', {
     corejs: 2,
     useESModules: false // 不允许使用es modules,babel需要通过@babel/plugin-transform-modules-commonjs将es module转换为commonjs模块解析
    }
   ]
  ]
 }
 }
}

⚠️:通过babel的env.test指定jest测试时需要的babel配置(同webpack转换解析时不同),jest会自动识别env.test的配置。

单测文件

理解:

  • 单元测试不应该追求代码的覆盖率;
  • 单元测试主要是为了测试组件UI,数据驱动后UI的变化在可控范围之内;
  • 测试组件应以纯组件为主(业务组件逻辑过于复杂或经常变动,涉及到的引入文件过多,不便于测试所有的功能性),纯组件作为项目的基础组件功能性上基本不变化。

遇到的问题总结

1.异步生命周期

vue-test-utils提供了对异步请求方法的mock,文档如下:https://vue-test-utils.vuejs.org/zh/guides/testing-async-components.html

但是对于生命周期函数是异步的情况要怎么处理呢?以下是亲测有效但是有点麻烦的姿势:

// 假设在异步生命周期方法中,调用的函数是init,那我们就通过jest.fn()提供的方法进行mock
init.default = jest.fn().mockImplementation(() => Promise.resolve(yourValue))

// 在Jest提供的全局方法中,调用异步生命周期的方法,以保证每个断言都是在生命周期之后
beforeEach(async () => {
 init.default.mockClear()
 await wrapper.vm.$mount() // 异步生命周期里会调用init方法
})

2.如果测试文件中包含require.context,请看这一条 :

这时候没有webpack怎么办?当然是用别人踩过坑的方法救急!

说实话,如果组件引用了这种东西,我觉得它不够纯洁,还是不要管它好了?( ̄? ̄")?,放它走吧。

但是为什么要解决这个问题呢?想到以后可能还要测试js文件,我们的标准也有可能是覆盖代码行数的测试,所以,还是解决一下吧。

其实思路很简单,我们需要在全局重写require.context,babel再遇到require.context就不会报错了。

// 别怕,不需要你手动写,有人已经写了个插件了:babel-plugin-require-context-hook
// 在babel.config.js的env.test中加上这个插件
...
plugins: [..., 'require-context-hook']
...

// 在jest.config.json中配置一下setupFiles 
// setupFiles表示在每个运行文件前添加的额外配置
...
"setupFiles": ["<rootDir>/.jest/register-context.js"],
...

// 创建.jest/register-context.js文件,引入时进行全局的注册
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();

3.测试过程总是报synax error ,诸如import无法解析这类es6语法引起的错误

小兄弟,只能说好好检查一下你的babel是否配置正确,并且安装了适合的babel-core版本。出现这个问题的时候,说明babel并没有解析es6语法,顺藤摸瓜,

(确保依赖包的安装源相同,建议用yarn)

  • if 是node_modules里的文件导致的,通过配置transformIgnorePatterns告诉babel需要它解析的模块;
  • else if 是项目的文件导致的,那就查看下自己的babel.config.js(确保不是.babelrc文件)是否配置正确,如果使用了@babel/preset-env,请注意module参数的配置;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
vue构建单页面应用实战
Apr 10 Javascript
Vue.js对象转换实例
Jun 07 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
了解前端理论:rscss和rsjs
May 23 #Javascript
微信小程序使用字体图标的方法
May 23 #Javascript
个人小程序接入支付解决方案
May 23 #Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 #Javascript
微信小程序上传图片到php服务器的方法
May 23 #Javascript
React精髓!一篇全概括小结(急速)
May 23 #Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 #Javascript
You might like
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
消防演习通知
2015/04/25 职场文书
入党积极分子群众意见
2015/06/01 职场文书
中学教师教学工作总结
2015/08/13 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
python实现简易名片管理系统
2021/04/11 Python
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
python中if和elif的区别介绍
2021/11/07 Python
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫