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