可以將 karma 與 webpack 結合起來，自動化整個單元測試過程。
配置環境
1. 首先根據 1 完成基本的 karma 測試環境。
2. 安裝 webpack 和 webpack 使用的 loader
在最簡單的情況下，我們只需要 webpack 和 webpack 的 karma 插件 karma-webpack
npm i -D webpack karma-webpack
模塊化代碼
webpack 是基於模塊進行打包的，所以，我們的代碼也應該已經采用了某種模塊管理機制，比如 node 直接支持的 commonjs 模塊。
這樣的話，我們需要將我們的源代碼和測試代碼進行模塊化處理。
原來的 add.js 函數處理為 commonjs 模塊。直接導出函數。
function add( a, b ){ return a + b; } module.exports = add;
原來的測試用例 add.spec.js，導入我們定義的函數，然后使用這個函數進行測試。
var add = require('../../app/add.js'); describe('add unit test.', function(){ it('2 + 3 = 5', function(){ var result = add(2, 3); expect( result).toBe( 5 ); }); });
創建入口文件
我們希望將源代碼和測試代碼通過 webpack 打包為一個文件，然后交給 karma 進行統一的測試，為了將源代碼和測試代碼組合在一起，我們可以創建一個 karma 的入口文件，通過它來引用我們的源代碼和單元測試代碼，通過 webpack 將這個文件作為打包的入口來生成最終的腳本文件，然后由 karma 將這個文件交給單元測試環境執行，獲取測試的結果。
這里，我們在項目的根目錄下，創建一個名為 karma-bundle.js 的入口文件，內容如下：
require('./app/add.js');
require('./test/unit/add.spec.js');
注意，這里統一使用了 commonjs 包格式。
為了測試方便，我們可以創建一個 webpack 的配置文件，自己先進行打包，檢查打包的結果是否正確。
創建名為 webpack.config.js 的 webpack 配置文件。內容如下。
var path = require('path'); var ROOT_PATH = path.resolve(__dirname); var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); module.exports = { entry: "./karma-bundle.js", output: { path: BUILD_PATH, filename: 'bundle.js' }, };
這樣，我們可以直接執行 webpack 來檢查打包之后的結果是否正確。
配置 Karma
在 Karma 中，我們需要注意兩個地方。
1. files 中，我們僅僅需要配置這個入口文件就可以了。
files: [ 'karma-bundle.js' ],
2. 這個文件並不是直接注入到測試環境中，我們需要使用 webpack 將這個文件作為入口進行打包處理，webpack 會查找這個文件依賴的內容，將所有的內容打包，最后輸出一個打包文件，這個文件才是需要測試環境處理的文件。
這樣的工作，我們通過預處理器進行。
preprocessors: { 'karma-bundle.js': ['webpack'] },
注意，你一定要安裝了 karma-webpack 這個插件，而且必須有 webpack 。
執行測試
所有工作准備好之后，我們可以通過 karma 將整個過程統一執行了。只需要 karma start 就可以了。
> karma start Hash: 8344a6c0a9b3c44a5636 Version: webpack 1.12.14 Time: 10ms webpack: bundle is now VALID. webpack: bundle is now INVALID. Hash: a7a4dbb23c1393742816 Version: webpack 1.12.14 Time: 46ms Asset Size Chunks Chunk Names karma-bundle.js 1.88 kB 0 [emitted] karma-bundle.js chunk {0} karma-bundle.js (karma-bundle.js) 334 bytes [rendered] [0] ./karma-bundle.js 63 bytes {0} [built] [1] ./app/add.js 70 bytes {0} [built] [2] ./test/unit/add.spec.js 201 bytes {0} [built] webpack: bundle is now VALID. 23 02 2016 14:51:35.044:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/ 23 02 2016 14:51:35.055:INFO [launcher]: Starting browser Chrome 23 02 2016 14:51:36.697:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#S8gDNP6eDACwVLy6AAAA with id 99 231351 Chrome 47.0.2526 (Windows 7 0.0.0): Executed 1 of 1 SUCCESS (0.005 secs / 0.003 secs) PS C:\study\karmaStudy\karma2>
你可以看到處理的詳細過程。
使用 NPM 命令
還可以使用 NPM 的自定義命令來完成自動化。
在 package.json 文件中，自定義 test 命令
"scripts": { "test": "karma start" },
現在，可以直接使用 npm test 來執行測試了。
> npm test > karma2@1.0.0 test C:\study\karmaStudy\karma2 > karma start ▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ Hash: 8344a6c0a9b3c44a5636 Version: webpack 1.12.14 Time: 9ms webpack: bundle is now VALID. webpack: bundle is now INVALID. Hash: a7a4dbb23c1393742816 Version: webpack 1.12.14 Time: 45ms Asset Size Chunks Chunk Names karma-bundle.js 1.88 kB 0 [emitted] karma-bundle.js chunk {0} karma-bundle.js (karma-bundle.js) 334 bytes [rendered] [0] ./karma-bundle.js 63 bytes {0} [built] [1] ./app/add.js 70 bytes {0} [built] [2] ./test/unit/add.spec.js 201 bytes {0} [built] webpack: bundle is now VALID. 23 02 2016 14:53:53.371:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/ 23 02 2016 14:53:53.391:INFO [launcher]: Starting browser Chrome 23 02 2016 14:53:56.044:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#GAQtOyOe56YFuQ0vAAAA with id 21 030194 Chrome 47.0.2526 (Windows 7 0.0.0): Executed 1 of 1 SUCCESS (0.01 secs / 0.002 secs) ▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
總結
使用 Karma 集成 webpack 需要解決模塊化問題，代碼入口問題。