測試框架認識

karma：提供瀏覽器測試環境，在此karma提供測試服務。
mocha：提供Javascript測試環境，在此作為karma測試框架，被引入karma中使用。
chai：斷言庫。

項目中安裝karma

安裝karma：npm install karma -D
全局安裝karma腳手架，便於使用karma命令：npm install karma-cli -g

生成karma配置文件

進入測試文件夾：cd **
生成karma配置文件：karma init karma.conf.js(配置文件名)

安裝測試框架

安裝依賴包：npm install mocha karma-mocha chai karma-chai karma-chrome-launcher -D
説明：karma-mocha、karma-chai、karma-chrome-launcher為將框架引入karma的中間件，在配置文件plugins中配置

// karma.conf.js文件：
frameworks: ['mocha',"chai"],
plugins: [
            "karma-mocha",
            "karma-chrome-launcher",
            "karma-chai"
        ]

安裝預處理器webpack

由於測試文件中沒有文件模塊化，所以引入webpack。
安裝webpack依賴包：npm install webpack webpack-merge karma-webpack -D
安裝babel-loader依賴包：npm install babel-loader babel-core babel-preset-2015 -D

plugins: [
            // ...
            "karma-webpack"
        ],
preprocessors:{
    '待預處理文件':['webpack']
}，
webpack:{
    // webpack相關配置，無entry與output配置項
}

安裝預處理器karma-coverage，統計代碼覆蓋率

由於使用了webpack打包了測試文件，所以會影響karma-coverage統計測試文件代碼覆蓋率結果，所以此處我們使用karma-coverage官網推薦istanbul插件統計代碼覆蓋率（istanbul會將統計結果注入源碼），所以由karma-coverage生成覆蓋率報告。
安裝依賴包：npm install karma-coverage babel-plugin-istanbul -D

reporters: ['progress','coverage'],
// karma-coverage配置
coverageReporter: {
            dir: 'coverage/',
            /* 多個報告類型 */
            reporters: [
                {type: 'text-summary',subdir:'.',file:'textSummary.txt'},
                {type:'text-summary'},
                {type:'html',subdir:'html'}
            ]
        },
webpack:{
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude:[
                    resolve('node_modules')
                ],
                loader: 'babel-loader',
                query:{
                    // 引入了istanbul插件來檢測Coverage。安裝babel-plugin-istanbul插件
                    plugins:['istanbul']
                }
            },
        ]
    }
}

啓動karma服務

karma start

啓動測試

karma run

參考網站：

karma-coverage：https://www.zybuluo.com/wangx...
前端自動化單元測試初探：http://www.51testing.com/html...
karma筆記：https://segmentfault.com/n/13...