vue单元测试安装依赖

Karma 是一个基于Node.js的Javascript测试执行过程管理工具。该工具可用于测试所有主流web浏览器，也可集成到CI工具，也可以
和其他代码编辑器一起使用，它可以监听文件的变化，然后自动执行。

安装Karma环境

npm install -g karma

为了方便搭建karma环境，我们可以全局安装karma-cli来帮我们初始化测试环境

npm install -g karma-cli

我们在项目的根目录下也需要安装一下，如下命令：

npm install karma --save-dev

先来安装一下依赖的插件如下：

1. 需要可以打开chrome浏览器的插件 npm install karma-chrome-launcher --save-dev
2. 需要可以运行jasmine的插件 npm install karma-jasmine jasmine-core --save-dev
3. 需要可以运行webpack的插件 npm install karma-webpack webpack --save-dev
4. 需要可以显示的sourcemap的插件 npm install karma-sourcemap-loader --save-dev
5. 需要可以显示测试代码覆盖率的插件 npm install karma-coverage-istanbul-reporter --save-dev
6. 需要全局安装 jasmine-core 如命令：npm install -g jasmine-core

如下一键安装命令：

npm install --save-dev karma-chrome-launcher karma-jasmine karma-webpack karma-sourcemap-loader karma-coverage-istanbul-reporter

也需要全局安装一下 jasmine-core, 如下代码：

npm install -g jasmine-core

代码覆盖率是在测试中运行到的代码占所有代码的比率。因此接下来我们在Karma环境中添加Coverage。
在项目的根目录下，运行如下命令进行安装

npm install --save-dev karma-coverage

然后需要在配置文件 karma.conf.js 代码配置如下：

 1 module.exports = function(config) {
 2   config.set({
 3 
 4     // base path that will be used to resolve all patterns (eg. files, exclude)
 5     basePath: ‘‘,
 6 
 7     // frameworks to use
 8     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
 9     frameworks: [‘jasmine‘],
10 
11 
12     // list of files / patterns to load in the browser
13     files: [
14       /* 注意：是自己添加的 */
15       ‘src/**/*.js‘,
16       ‘test/**/*.js‘
17     ],
18 
19 
20     // list of files / patterns to exclude
21     exclude: [],
22 
23 
24     // preprocess matching files before serving them to the browser
25     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
26     /* 覆盖源文件 不包括测试库文件*/
27     preprocessors: {
28       ‘src/**/*.js‘: [‘coverage‘]
29     },
30     
31 
32     // test results reporter to use
33     // possible values: ‘dots‘, ‘progress‘
34     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
35     reporters: [‘progress‘, ‘coverage‘],
36     
37     /* 新增的配置项 */
38     coverageReporter: {
39       type: ‘html‘,
40       dir: ‘coverage/‘
41     },
42 
43     // web server port
44     port: 9876,
45 
46 
47     // enable / disable colors in the output (reporters and logs)
48     colors: true,
49 
50 
51     // level of logging
52     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
53     logLevel: config.LOG_INFO,
54 
55 
56     // enable / disable watching file and executing tests whenever any file changes
57     autoWatch: true,
58 
59 
60     // start these browsers
61     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
62     browsers: [‘Chrome‘],
63 
64 
65     // Continuous Integration mode
66     // if true, Karma captures browsers, runs the tests and exits
67     singleRun: false,
68 
69     // Concurrency level
70     // how many browser should be started simultaneous
71     concurrency: Infinity
72   })
73 }

View Code

webpack和Babel集成Karma环境中。

在项目中，会使用到webpack和es6，因此需要集成到karma环境中。
安装karma-webpack

npm install --save-dev karma-webpack webpack

1.安装babel核心文件 npm install babel-core --save-dev
2. webpack的Loader处理器 npm install babel-loader --save-dev
3. babel的istanbul覆盖率插件 npm install babel-plugin-istanbul --save-dev
4. babel转换到哪个版本这里是ES2015 npm install babel-preset-es2015 --save-dev

一键安装命令如下：

npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-plugin-istanbul