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学习笔记(八) js内置对象
Jun 19 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
详解JavaScript匿名函数和闭包
Jul 10 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设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
php桥接模式应用案例分析
2019/10/23 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
解决python3爬虫无法显示中文的问题
2018/04/12 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
中职生自荐信
2013/10/13 职场文书
自考毕业自我鉴定范文
2013/10/27 职场文书
医学生个人求职信范文
2014/02/07 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL