webpack4.0各個(gè)擊破（9）—— karma篇

Webpack4.0中級(jí)教程

webpack作為前端最火的構(gòu)建工具，是前端自動(dòng)化工具鏈最重要的部分，使用門檻較高。本系列是筆者自己的學(xué)習(xí)記錄，比較基礎(chǔ)，希望通過(guò)問(wèn)題 + 解決方式的模式，以前端構(gòu)建中遇到的具體需求為出發(fā)點(diǎn)，學(xué)習(xí)webpack工具中相應(yīng)的處理辦法。（本篇中的參數(shù)配置及使用方式均基于webpack4.0版本）

一. webpack與自動(dòng)化測(cè)試

webpack對(duì)應(yīng)的關(guān)鍵詞是模塊化，它的主要任務(wù)就是打包和管理模塊，所以首先需要明確的概念就是webpack之所以關(guān)聯(lián)自動(dòng)化測(cè)試，是因?yàn)?strong>它能夠?yàn)闇y(cè)試腳本提供模塊管理的能力，本質(zhì)上來(lái)講，是將webpack的打包功能嵌入了自動(dòng)化測(cè)試框架，而不是將自動(dòng)化測(cè)試框架作為插件集成進(jìn)了webpack，理解這個(gè)區(qū)別是非常關(guān)鍵的。

對(duì)于Karma+Mocha+Chai及其他自動(dòng)化測(cè)試相關(guān)工具的話題將在《大前端的自動(dòng)化工廠》系列博文中講述，本篇主要介紹karma-webpack連接件，它從工具實(shí)現(xiàn)層面上將自動(dòng)化測(cè)試與自動(dòng)化構(gòu)建聯(lián)系在了一起。

二. karma-webpack

插件地址：https://github.com/webpack-contrib/karma-webpack

2.1 自動(dòng)化單元測(cè)試庫(kù)簡(jiǎn)介

先對(duì)基本的單元測(cè)試工具做一個(gè)簡(jiǎn)要說(shuō)明：

• Karma 測(cè)試框架，提供多瀏覽器環(huán)境跑單元測(cè)試的能力，包括headless瀏覽器。
• Mocha 測(cè)試框架，提供兼容瀏覽器和Node環(huán)境的單元測(cè)試能力，可使用karma-mocha集成進(jìn)Karma中。
• Chai 斷言庫(kù)，支持should,expect,assert不同類型的斷言測(cè)試函數(shù)，可使用karma-chai集成進(jìn)Karma中。

大部分單元測(cè)試都是基于上述三個(gè)庫(kù)聯(lián)合使用而展開的。Karma-webpack主要提供的能力，是為Karma中加載的測(cè)試腳本提供模塊化加載的能力。

2.2 基本使用

使用yarn add karma-webpack -D進(jìn)行安裝，karma.conf.js配置文件如下：

module.exports = (config) => {
  config.set({

    files: [
      // 針對(duì)test目錄下所有符合命名規(guī)范的測(cè)試文件
      { pattern: 'test/*_test.js', watched: false },
      { pattern: 'test/**/*_test.js', watched: false }
    ],

    preprocessors: {
      // 為選定腳本指定前處理器，這里配置所有的測(cè)試腳本需要經(jīng)過(guò)webpack處理
      'test/*_test.js': [ 'webpack' ],
      'test/**/*_test.js': [ 'webpack' ]
    },

    webpack: {
      // webpack配置，針對(duì)測(cè)試腳本打包的compilation配置，與項(xiàng)目文件打包不相關(guān)
      // 也可以引入獨(dú)立的配置文件
    },

    webpackMiddleware: {
      //如果使用了webpack-dev-server則可以傳入一些參數(shù)
      stats: 'errors-only'
    }
  })
}

這種配置中webpack會(huì)將每一個(gè)命中的文件當(dāng)做是一個(gè)entry，也就是說(shuō)它只會(huì)處理局部的依賴管理，這樣做的優(yōu)點(diǎn)是可以針對(duì)部分測(cè)試腳本單獨(dú)跑單元測(cè)試，但劣勢(shì)也很明顯，就是當(dāng)測(cè)試腳本數(shù)量很大且需要默認(rèn)跑所有的測(cè)試用例的場(chǎng)景下（例如自動(dòng)化流水線上自動(dòng)觸發(fā)的LLT測(cè)試中）效率相對(duì)較低。

2.3 默認(rèn)跑完全部測(cè)試用例的場(chǎng)景

針對(duì)上面的問(wèn)題，webpak提供了另一種可選的處理測(cè)試腳本集的方法，很容易想象，其實(shí)就是自己新建一個(gè)entryPoint,將要跑的測(cè)試腳本全部引入，打包成一個(gè)bundle.js文件，它的優(yōu)勢(shì)和劣勢(shì)和基本場(chǎng)景正好是相反的。

這種場(chǎng)景下，karma.conf.js的配置只需要針對(duì)入口文件即可：

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' ]
},

然后在測(cè)試文件的根目錄下新建一個(gè)入口腳本index_test.js:

// 這個(gè)配置針對(duì)的是test/**/?_test.js格式的腳本文件
const testsContext = require.context(".", true, /_test$/)；
testsContext.keys().forEach(testsContext)

三. 測(cè)試報(bào)告

一般跑完單元測(cè)試，都需要輸出一份指定格式的報(bào)告，用于過(guò)后自查或問(wèn)題追溯，此處需要注意的是當(dāng)與webpack4.0結(jié)合使用時(shí)，karma的一些默認(rèn)行為會(huì)失效（例如在控制臺(tái)輸出單元測(cè)試用例和結(jié)果匯總，以及karma獨(dú)立運(yùn)行時(shí)用來(lái)生成代碼覆蓋率報(bào)告插件karma-coverage也無(wú)法正常工作），在此均需要重新配置。

• 單元測(cè)試報(bào)告

  單元測(cè)試信息無(wú)法輸出的問(wèn)題，可以顯式引用插件karma-spec-reporter或karma-mocha-reporter并進(jìn)行基本的配置即可。

• 代碼覆蓋率報(bào)告

  代碼覆蓋率報(bào)告的自動(dòng)生成配置較為復(fù)雜，需要依賴前端代碼覆蓋率工具istanbul并結(jié)合若干插件才能實(shí)現(xiàn)。低版本的webpack可以參考karma-webpack-example這個(gè)開源項(xiàng)目的示例進(jìn)行配置。webpack4.0以上版本可以參考下文推薦的示例。

  單元測(cè)試結(jié)果：

  

  覆蓋率報(bào)告：

四. 配置參考

筆者提供了針對(duì)webpack4.0 + karma的自動(dòng)化測(cè)試配置示例，放在了Webpack4-Karma-Mocha-Chai-Demo，有需要的小伙伴可以自行查看，如果對(duì)你有幫助，不要忘記給個(gè)Star哦~