vuecli3.0+vue-test-utils+mocha+karma生成单元测试
1、用vuecli3.0创建一个文件夹unit
vue create unit
可以选择默认配置，也可以根据自己的需要手动配置
此处输入图片的描述
2、安装相关依赖
- 安装karma
npm install karma -g
并且在安装的项目中使用
npm install karma --save-dev
需要全局安装，可以使用命令行。
安装完成以后，命令行输入 karma start
此处输入图片的描述
在浏览器输入http://localhost:9876/
![此处输入图片的描述]
如果出现以上信息，表示karma已经安装成功。
- karma配置
初始化karma配置文件karma.conf.js- ctrl+c 结束刚才启动的Karma
-
在命令行输入karma init
此处输入图片的描述 - 接下就是一段询问关于配置的问题。（ps：karma.conf.js配置可以自己修改，这里是快速生成配置）
Which testing framework do you want to use?（你想要使用哪个测试框架？）
默认是jasmine。（如果你想用其他可以自己修改），直接回车下一步Do you want to use Require.js ? （你要使用Require.js吗？）
This will add Require.js plugin. （这将添加Require.js插件。）
Press tab to list possible options. Enter to move to the next question. （按选项卡列出可能的选项。 输入转到下一个问题。）
默认是no。（现在都在使用webpack打包，这也是为什么你肯定奇怪的地方，单元测试为什么要用webpack） ，直接回车下一步Do you want to capture any browsers automatically ? （你想要在哪些浏览器里面运行）
Press tab to list possible options. Enter empty string to move to the next question.（和上面一样）
默认是Chrome。（你可以添加更多浏览器回车就是填写下一个浏览器名称，必须是你电脑安装的浏览器，最好还是去karma.conf.js添加直观一些），直接按2次回车下一步-
What is the location of your source and test files ?（测试文件的位置是什么？）
You can use glob patterns, eg. "js/.js" or "test//Spec.js".（你可以使用glob模式，例如。 “js / .js”或“test / ** / * Spec.js”）
Enter empty string to move to the next question.（输入空字符串移动到下一个问题。）
默认是空，这个是配置你的单元测试用例的文件，根据自己项目和喜好，你可以把测试用例文件和当前被文件放在一起，例如angular-cli就是这样的。也可以单独分离放到test文件下，github大量的npm包都是这样的。我这里就学angular-cli做法，填写：tests/****/.spec.js，就是说tests文件夹下的所有.spec.js后缀都是t测试用例文件。回车下一步
此处输入图片的描述
此处输入图片的描述
vue生成的目录里已经有单元测试的文件夹，目录机构如下：
此处输入图片的描述
如果不想建，可以直接下一步，等会到karma.conf.js修改。 Should any of the files included by the previous patterns be excluded ?（是否应排除某些包含的任何文件？）
You can use glob patterns, eg. "/.swp". （您可以使用glob模式，例如。“/.SWP”。）
这是为了性能优化，排除那些文件不需要去监听，加快运行速度。如果你不确定要排除哪些文件，可以去karma.conf.js修改。我就直接直接下一步了。Do you want Karma to watch all the files and run the tests on change ? （你想要Karma来监听所有的文件，并在变化中运行测试吗？）
Press tab to list possible options. （按选项卡列出可能的选项。）
默认yes，它的意思你写完了.spec.js后缀文件会自动运行测试，等我们把Karma跑起来，在自动运行。
这里no。
这就生成出来了配置
找一款你顺手的编辑器打开它，（我的用vscode）
-
接下来就说关于依赖插件plugins
需要可以打开Chrome浏览器的插件 npm install karma-chrome-launcher --save-dev
需要可以运行mocha的插件 npm install karma-mocha --save-dev
需要可以运行webpack的插件 npm install karma-webpack --save-dev
需要可以显示sourcemap的插件 npm install karma-sourcemap-loader --save-dev
需要可以显示测试代码覆盖率的插件 npm install karma-coverage-istanbul-reporter --save-dev
插件就先安装这么多，后面需要在安装，可以这样一起安装：npm install karma-chrome-launcher karma-mocha karma-webpack karma-sourcemap-loader karma-coverage-istanbul-reporter --save-dev
把插件写到karma.conf.js配置里面去
此处输入图片的描述
我们先只需要前2个，后面注释起来，让karma能随时跑起来。
然后去package.json 配置一个npm命令，编辑器或者ide可以直接运行npm命令。
此处输入图片的描述
我们karma配置可以运行起来，点击浏览器的debug按钮，在新页面中右键检查，看到报错如下：
此处输入图片的描述 是因为浏览器无法识别es6语法导致的，那么我们需要安装babel的相关依赖解决这个问题，babel的依赖包尽量保持一致，这里我们使用7.*版本
npm i -D @babel/core @babel/preset-env babel-loader babel-plugin-istanbul @babel/plugin-syntax-dynamic-import
同时需要安装webpack，这里需要注意，
<p style="color:red">webpack4.版本需要安装的vue-loader也是14.，否则会报错无法识别vue语法</p>
<p style="color:red">babel版本要一致</p>
我们在根目录下新建babel配置文件:.babelrc文件，输入内容：
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}
<p style="color:red">在karma.conf.js文件对webpack配置识别vue路径别名@</p>
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'static': path.resolve(__dirname, '../static') // 增加这一行代码
}
}
我们对比一下安装的所有依赖：
package.json文件如下：
{
"name": "unit",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"unit": "karma start"
},
"dependencies": {
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"vue-loader": "^14.2.2"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-plugin-unit-mocha": "^3.2.0",
"@vue/cli-service": "^3.2.0",
"@vue/test-utils": "^1.0.0-beta.20",
"babel-loader": "^8.0.4",
"babel-plugin-istanbul": "^5.1.0",
"chai": "^4.1.2",
"karma": "^3.1.4",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.4",
"istanbul-instrumenter-loader": "^3.0.1",
"karma-mocha": "^1.3.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^3.0.5",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.28.0",
"webpack-dev-server": "^3.1.13"
}
}
配置完成后的karma.conf.js文件如下：
// Karma configuration
// Generated on Thu Dec 20 2018 22:30:40 GMT+0800 (CST)
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha'],
// list of files / patterns to load in the browser
files: [
'tests/**/*.spec.js'
],
// list of files / patterns to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'tests/**/*.spec.js': ['webpack', 'sourcemap']
},
plugins: [
'karma-chrome-launcher',
'karma-mocha',
'karma-webpack',
'karma-sourcemap-loader',
'karma-coverage-istanbul-reporter'
],
webpack: {
devtool: 'inline-source-map',
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'istanbul-instrumenter-loader',
options: { esModules: true }
},
enforce: 'pre',
exclude: /node_modules|\.spec\.js$/
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-syntax-dynamic-import', 'istanbul']
}
}, {
test: /\.vue$/,
loader: 'vue-loader'
}]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'static': path.resolve(__dirname, '../static') // 增加这一行代码
}
}
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['coverage-istanbul'],
// 配置覆盖率报告的查看方式配置
coverageIstanbulReporter: {
// 可以用什么形式展示 支持以下格式：clover、cobertura、html、json-summary、json、lcov、lcovonly、none、teamcity、text-lcov、text-summary、text
// 可以看连接 : https://github.com/istanbuljs/istanbul-reports/tree/590e6b0089f67b723a1fdf57bc7ccc080ff189d7/lib
reports: ['html', 'text-summary'],
// 结果存放的位置
dir: 'coverage/',
// 如果使用webpack和预加载器，可以绕过webpack打破源路径
fixWebpackSourcePaths: true,
// 停止输出消息，如`File [$ {filename}]忽略，没有任何东西可以映射
skipFilesWithNoCoverage: true,
// 大多数记录接受额外的配置选项。 你可以通过`report-config`选项传递这些
'report-config': {
// 配置html
html: {
// 输出到 ./coverage/html
subdir: 'html'
}
}
},
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
至此，配置完成，全部覆盖，ok完工
