webpack
作為前端最火的構建工具,是前端自動化工具鏈最重要的部分,使用門檻較高。本系列是筆者自己的學習記錄,比較基礎,希望通過問題 + 解決方式的模式,以前端構建中遇到的具體需求為出發點,學習webpack
工具中相應的處理辦法。(本篇中的引數配置及使用方式均基於webpack4.0版本
)
一. 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,有需要的小夥伴可以自行檢視,如果對你有幫助,不要忘記給個Star哦~