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 代码配置如下：

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: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      /* 注意：是自己添加的 */
      'src/**/*.js',
      'test/**/*.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: {
      'src/**/*.js': ['coverage']
    },
    

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'coverage'],
    
    /* 新增的配置项 */
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },

    // 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
  })
}

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