关于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 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
vuejs指令详解
Feb 07 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 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
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jquery 问答知识整理
2010/02/11 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
医生自荐信
2013/10/11 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
企业后勤岗位职责
2014/02/28 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
政风行风评议工作总结
2014/10/21 职场文书
护理医院见习报告
2014/11/03 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
Python入门之使用pandas分析excel数据
2021/05/12 Python
新手入门Mysql--sql执行过程
2021/06/20 MySQL
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技