测试框架vue2.0+webpack2.0+Karma+Moch
2017-08-04 本文已影响175人
jinya2437
一、准备工作
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
cmd窗口会有如下提示：依次回车4次 y n n n
cmd操作命令，点击看图：
![2]LYEF]KW0([9XS@EE{P]L.png
控制台选项卡弹出Karma+Mocha的时候可以选择Y，但是配置文件太复杂。不好入手~也不好理解
安装依赖，走你
$ cd my-project
$ npm install
项目创建成功后、在package.json文件中添加karma + Mocha测试框架需要的包、如下所示：
"karma": "^1.7.0",
"karma-coverage": "^1.1.1",// 生成代码覆盖率。
"karma-mocha": "^1.3.0",// 让你在karma中使用Mocha测试框架的插件
"karma-phantomjs-launcher": "^1.0.2",// 是一个没有界面的 “浏览器”
"karma-phantomjs-shim": "^1.4.0",// 解决phantomJS 不支持 Function.prototype.bind语法
"karma-sourcemap-loader": "^0.3.7",// Karma 插件，生成文件的 sourcemap
"karma-spec-reporter": "0.0.31",// 命令行输出测试用户的运行结果
"karma-webpack": "^2.0.2",// webpack与karma的连接
"mocha": "^3.5.0",// 测试框架
"sinon": "^2.1.0",// 与断言库相关
"sinon-chai": "^2.8.0",// 与断言库相关
"chai": "^3.5.0",// 断言库
"karma-sinon-chai": "^1.3.1",// 与断言库相关
cmd命令 安装上述测试所需要用到的包
$npm install
二、测试用例
- 我们依次创建3个文件 标识**
>--my-project // 根目录
> ---|src
>------|components
>------|router
> ---|test // 测试文件
>------|unit
>--------|specs
>----------|**Hello.spec.js**// 测试用例
>--------|**index.js**// 测试入口文件
>--------|**karma.conf.js** // 测试karma框架配置文件
- 测试用例：Hello.spec.js
// Hello.spec.js
import Vue from 'vue'
import Hello from '@/components/Hello'
describe('Hello.vue', function(){
it('should render correct contents', function(){
var Constructor = Vue.extend(Hello)
var vm = new Constructor().$mount()
expect(vm.$el.querySelector('.hello h1').textContent)
.to.equal('Welcome to Your Vue.js App')
})
})
- 测试入口文件：index.js
// index.js
import Vue from 'vue'
// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)
- 测试karma框架配置文件：karma.conf.js
// This is a karma config file. For more details see
// http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
// https://github.com/webpack/karma-webpack
module.exports = function(config) {
config.set({
// 是一个没有界面的 "浏览器"，具备浏览器支持js和标准
browsers: ['PhantomJS'],
// mocha:写测试用例 、sinon-chai:断言库、phantomjs-shim:解决PhantomJS不支持 Function.prototype.bind
frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
// 报告文件
reporters: ['spec', 'coverage'],
// 测试入口文件
files: ['./index.js'],
// 预处理文件，与webpack结合使用
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
webpack: {
resolve: {
// 引入文件时可以忽略后缀名
extensions: ['.js', '.vue', '.json'],
// 引入文件的路径名过长，设置别名
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': 'D:\\Users\\my-project\\src'
}
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/img/[name].[hash:7].[ext]'
}
}, {
test: /\.js$/,
use:{
loader: 'babel-loader'
},
include: ['D:\Users\my-project\src', 'D:\Users\my-project\test']
}, {
test: /\.css$/,
use: ['vue-style-loader', {
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false
}
}]
}, {
test: /\.less$/,
use: ['vue-style-loader', {
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false
}
}, {
loader: 'less-loader',
options: {
sourceMap: false
}
}]
}]
},
devtool: '#inline-source-map',
// 针对加载器
resolveLoader: {
// 使用别名
alias: {
'scss-loader': 'sass-loader'
}
}
},
coverageReporter: {
dir: './coverage',
reporters: [{
type: 'lcov',
subdir: '.'
}, {
type: 'text-summary'
}]
}
})
}
三、运行测试结果
在package.json的属性scripts中加入测试命令
"unit": "karma start test/unit/karma.conf.js --single-run",
"test": "npm run unit"
cmd控制台执行：
npm run test
执行成功结果，点击看图：
