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