Vue-cli3中的前端单元测试之环境搭建
金融前端组 2019-8-6
单元测试
本文中所用到的测试工具如下 kmci: karma + mocha + chai + istanbul 此文只涉及在vue-cli3中如何集成以上工具，不再详细介绍各个工具
mocha + chai
首先创建vue-cli3的项目
vue create unit-test
1
在预设环境中选择unit-test 随后选择mocha + chai
之后项目就自带了vue-cli帮我们集成的mocha和chai
karma
1.安装相关依赖
npm install --save-dev karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack
1
2.配置karma
在项目的根目录执行karma的初始化方法，生成karma.conf.js
karma init
1
初始化过程中，会有一些选项，用于生成配置文件的默认值。
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> mocha
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
更改生成的karma配置文件
添加了webpack相关的配置，增加了测试文件和需要预编辑的文件的匹配条件式。
// Karma configuration
// Generated on Mon Jul 01 2019 18:02:32 GMT+0800 (GMT+08:00)
let webpackConfig = require('@vue/cli-service/webpack.config.js')
module.exports = function (config) {
config.set({
webpack: webpackConfig,
// 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: {
'**/*.spec.js': ['webpack', 'sourcemap']
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['spec'],
// 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: ['ChromeHeadless'],
// 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
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
3.编写测试用例
理论上应为每个Vue组件分别写一个单元测试文件。测试文件名应该为“[组件名].spec.js”，比如组件名为HelloWorld.vue，那么对应的测试文件名为HelloWorld.spec.js
4.运行测试用例
在package.json中添加一条script。
"test": "karma start"
1
然后运行执行命令，开始测试。
npm run test
1
参考文章: 若遇到webpack的编译报错请参考原文解决方案
istanbul
1.安装相关依赖
npm install --save-dev babel-plugin-istanbul istanbul-instrumenter-loader nyc
1
2.配置babel
babel.config.js
module.exports = {
presets: [
'@vue/app'
],
plugins: [
'babel-plugin-istanbul'
]
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
3.配置webpack
vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
config.devtool('eval')
config.module
.rule('istanbul')
.test(/\.(js|vue)$/)
.enforce('post')
.include.add(path.resolve(__dirname, '/src'))
.end()
.use('istanbul-instrumenter-loader')
.loader('istanbul-instrumenter-loader')
.options({ esModules: true })
.end()
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
4.配置nyc
nyc是istanbul的命令行工具
package.json
"nyc": {
"check-coverage": true,
"per-file": true,
"lines": 90,
"statements": 90,
"functions": 90,
"branches": 90,
"include": [
"src/**/*.{js,vue}"
],
"exclude": [
"src/*.js"
],
"reporter": [
"text",
"lcov",
"text-summary"
],
"extension": [
".js",
".vue"
],
"cache": true,
"all": true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
5.使用
- Single-run:
nyc vue-cli-service test:unit - Watched run:
nodemon --exec nyc vue-cli-service test:unit - add
coverageand.nyc_outputto your.gitignore. - npm install --save-dev nodemon（用于监听）
参考issue：遇到的一些问题的解决方案也都来源于issue
Vue Test Utils
直接安装即可使用 npm install --save-dev @vue/test-utils