目錄
- 一. webpack與自動化測驗
- 二. karma-webpack
- 2.1 自動化單元測驗庫簡介
- 2.2 基本使用
- 2.3 默認跑完全部測驗用例的場景
- 三. 測驗報告
- 四. 配置參考
一. webpack與自動化測驗
webpack對應的關鍵詞是模塊化，它的主要任務就是打包和管理模塊，所以首先需要明確的概念就是webpack之所以關聯自動化測驗，是因為它能夠為測驗腳本提供模塊管理的能力，本質上來講，是將webpack的打包功能嵌入了自動化測驗框架，而不是將自動化測驗框架作為插件集成進了webpack，理解這個區別是非常關鍵的，
對于Karma+Mocha+Chai及其他自動化測驗相關工具的話題將在《大前端的自動化工廠》系列博文中講述，本篇主要介紹karma-webpack連接件，它從工具實作層面上將自動化測驗與自動化構建聯系在了一起，
二. karma-webpack
插件地址：https://github.com/webpack-contrib/karma-webpack
2.1 自動化單元測驗庫簡介
先對基本的單元測驗工具做一個簡要說明：
Karma測驗框架，提供多瀏覽器環境跑單元測驗的能力，包括headless瀏覽器，Mocha測驗框架，提供兼容瀏覽器和Node環境的單元測驗能力，可使用karma-mocha集成進Karma中，Chai斷言庫，支持should,expect,assert不同型別的斷言測驗函式，可使用karma-chai集成進Karma中，
大部分單元測驗都是基于上述三個庫聯合使用而展開的，Karma-webpack主要提供的能力，是為Karma中加載的測驗腳本提供模塊化加載的能力，
2.2 基本使用
使用yarn add karma-webpack -D進行安裝，karma.conf.js組態檔如下：
module.exports = (config) => {
config.set({
files: [
// 針對test目錄下所有符合命名規范的測驗檔案
{ pattern: 'test/*_test.js', watched: false },
{ pattern: 'test/**/*_test.js', watched: false }
],
preprocessors: {
// 為選定腳本指定前處理器，這里配置所有的測驗腳本需要經過webpack處理
'test/*_test.js': [ 'webpack' ],
'test/**/*_test.js': [ 'webpack' ]
},
webpack: {
// webpack配置，針對測驗腳本打包的compilation配置，與專案檔案打包不相關
// 也可以引入獨立的組態檔
},
webpackMiddleware: {
//如果使用了webpack-dev-server則可以傳入一些引數
stats: 'errors-only'
}
})
}
這種配置中webpack會將每一個命中的檔案當做是一個entry，也就是說它只會處理區域的依賴管理，這樣做的優點是可以針對部分測驗腳本單獨跑單元測驗，但劣勢也很明顯，就是當測驗腳本數量很大且需要默認跑所有的測驗用例的場景下（例如自動化流水線上自動觸發的LLT測驗中）效率相對較低，
2.3 默認跑完全部測驗用例的場景
針對上面的問題，webpak提供了另一種可選的處理測驗腳本集的方法，很容易想象，其實就是自己新建一個entryPoint,將要跑的測驗腳本全部引入，打包成一個bundle.js檔案，它的優勢和劣勢和基本場景正好是相反的，
這種場景下，karma.conf.js的配置只需要針對入口檔案即可：
files: [
// only specify one entry point
// and require all tests in there
'test/index_test.js'
],
preprocessors: {
// add webpack as preprocessor
'test/index_test.js': [ 'webpack' ]
},
然后在測驗檔案的根目錄下新建一個入口腳本index_test.js:
// 這個配置針對的是test/**/?_test.js格式的腳本檔案
const testsContext = require.context(".", true, /_test$/)；
testsContext.keys().forEach(testsContext)
三. 測驗報告
一般跑完單元測驗，都需要輸出一份指定格式的報告，用于過后自查或問題追溯，此處需要注意的是當與webpack4.0結合使用時，karma的一些默認行為會失效（例如在控制臺輸出單元測驗用例和結果匯總，以及karma獨立運行時用來生成代碼覆寫率報告插件karma-coverage也無法正常作業），在此均需要重新配置，
-
單元測驗報告
單元測驗資訊無法輸出的問題，可以顯式參考插件
karma-spec-reporter或karma-mocha-reporter并進行基本的配置即可， -
代碼覆寫率報告
代碼覆寫率報告的自動生成配置較為復雜，需要依賴前端代碼覆寫率工具
istanbul并結合若干插件才能實作，低版本的webpack可以參考karma-webpack-example這個開源專案的示例進行配置，webpack4.0以上版本可以參考下文推薦的示例，單元測驗結果：
覆寫率報告：
四. 配置參考
筆者提供了針對webpack4.0 + karma的自動化測驗配置示例，放在了Webpack4-Karma-Mocha-Chai-Demo，有需要的小伙伴可以自行查看，
作者：大史不說話
鏈接：webpack4.0各個擊破（9）—— karma篇
來源：博客園
著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/246046.html
標籤：其他