关于Vue Webpack2单元测试示例详解


Posted in Javascript onAugust 14, 2017

前言

最近发现一个问题,vue-cli 提供的官方模板确实好用。但一直用下来手贱毛病又犯了,像穿了别人的内衣,总感觉不舒服。

所以有机会就瞎倒腾了一遍,总算把各个流程摸了一把。这里分享一下配置带覆盖率的单元测试。分享出来供大家参考学习,话不多少了,来一起看看详细的介绍:

一、文件结构

基本的文件结构。

├─src
│ ├─assets
│ ├─components
│ ├─app.vue
│ └─main.js
├─test
│ └─unit
│  ├─coverage
│  ├─specs
│  ├─index.js
│  └─karma.conf.js
├─.babelirc
├─webpack.conf.js
└─package.json

二、依赖

根据需要增删

yarn add -D \
cross-env \
# webpack
webpack \
webpack-merge \
vue-loader \
# babel
babel-core \
babel-loader \
babel-plugin-transform-runtime \
babel-preset-es2015 \
babel-register \
babel-plugin-istanbul \
# karma
karma \
karma-coverage \
karma-phantomjs-launcher \
karma-sourcemap-loader \
karma-spec-reporter \
karma-webpack \
mocha \
karma-mocha \
sinon-chai \
karma-sinon-chai \
chai \
sinon \

三、入口

先从 package.json 开始。跟官方的一致。设置 BABEL_ENV 可以在测试的时候才让 Babel 引入 istanbul 计算覆盖率。

{
 "scripts": {
 "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
 "test": "npm run unit",
 }
}

四、配置 Babel

在 .babelirc 中:

{
 "presets": ["es2015"],
 "plugins": ["transform-runtime"],
 "comments": false,
 "env": {
 "test": {
  "plugins": [ "istanbul" ]
 }
 }
}

按需设置,写 Chrome Extension 的话用 es2016 就行。

Babel 的 istanbul 插件是个很聪明的做法。

五、Loader 配置

从 Vue Loader 的文档可以看到,不需要额外配置,它非常贴心自动识别 Babel Loader。

如果还测试 js 文件那么给源文件夹下的 js 文件配置 Babel Loader 就行。

以 src 为例:

{
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: 'vue-loader'
  },
  {
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
   path.resolve(__dirname, '../src')
  ],
  exclude: /node_modules/
  }
 ]
 }
}

六、Karma 配置

为 webpack 设置环境

// karma.conf.js
const merge = require('webpack-merge')
let webpackConfig = merge(require('../../webpack.conf'), {
 devtool: '#inline-source-map',
 plugins: [
 new webpack.DefinePlugin({
  'process.env': '"testing"'
 })
 ]
})
// no need for app entry during tests
delete webpackConfig.entry

接着输出 karma 配置,基本沿用官方的配置。注意不同的浏览器需要安装不同的 karma 插件。

// karma.conf.js
module.exports = function (config) {
 config.set({
 // to run in additional browsers:
 // 1. install corresponding karma launcher
 // http://karma-runner.github.io/0.13/config/browsers.html
 // 2. add it to the `browsers` array below.
 browsers: ['Chrome'],
 frameworks: ['mocha', 'sinon-chai'],
 reporters: ['spec', 'coverage'],
 files: ['./index.js'],
 preprocessors: {
  './index.js': ['webpack', 'sourcemap']
 },
 webpack: webpackConfig,
 webpackMiddleware: {
  noInfo: true
 },
 coverageReporter: {
  dir: './coverage',
  reporters: [
  { type: 'lcov', subdir: '.' },
  { type: 'text-summary' }
  ]
 }
 })
}

七、引入所有组件

在 test/unit/index.js 里,这是官方的配置:

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)
// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)

因为之前配置 loader 时 src 文件夹下的 js 才会被收集计算覆盖率,所以可以放心 require 。

第二段 require 是为了所有源码一起算覆盖率。可以看到官方配置只排除了 src 目录里的 main.js,如果是多入口可以用 /^(?!.*\/main(\.js)?$)/i 排除所有的 main.js 文件。

八、开始测试

这基本上就是所有的配置了。其它的设置应该都是围绕插件本身,就不赘述。

九、Babeless 配置

如果不需要 Babel 可以用 istanbul-instrumenter-loader 收集覆盖率。

js 文件的配置同 Babel。

 Vue 文件需要在 options.loaders 选项里为 js 补上:

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
 loaders: {
  'js': 'istanbul-instrumenter-loader'
 }
 }
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 #Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 #Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 #Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 #Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 #Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
js异步编程小技巧详解
Aug 14 #Javascript
You might like
法压式咖啡之制作法
2021/03/03 冲泡冲煮
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
js登录弹出层特效
2014/03/07 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python实现两张图片的像素融合
2019/02/23 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python中常用的os操作汇总
2020/11/05 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
大学军训感言600字
2014/02/25 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers