karma+mocha+chai前端單元測試環境搭建

時間 2020-03-20

標籤 karma+mocha+chai karma mocha chai 前端單元測試環境搭建简体版

原文原文鏈接

測試框架認識

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

項目中安裝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']
                }
            },
        ]
    }
}