webpack4.0各個擊破(9)—— karma篇

來源:互聯網
上載者:User

標籤:開源   函數   簡介   自動   話題   測試架構   color   sse   repo   

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-reporterkarma-mocha-reporter並進行基本的配置即可。

  • 程式碼涵蓋範圍報告

    程式碼涵蓋範圍報告的自動組建組態較為複雜,需要依賴前端程式碼涵蓋範圍工具istanbul並結合若干外掛程式才能實現。低版本的webpack可以參考karma-webpack-example這個開源項目的樣本進行配置。webpack4.0以上版本可以參考下文推薦的樣本。

    單元測試結果:

覆蓋率報告:

四. 配置參考

筆者提供了針對webpack4.0 + karma的自動化測試組態樣本,放在了Webpack4-Karma-Mocha-Chai-Demo,有需要的小夥伴可以自行查看,如果對你有協助,不要忘記給個Star哦~

webpack4.0各個擊破(9)—— karma篇

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.