摘要：介紹前身，創(chuàng)建出來的以下是官網(wǎng)對的相關特點介紹支持真實瀏覽器無瀏覽器熱更新，文件變化后自動測試測試框架無關性支持開源易測試持續(xù)集成安裝配置配置項自動監(jiān)控更新如果為相對路徑，則加上作為前綴配合運行瀏覽器如果瀏覽器在指定時間

前身 Testacular， AngularJs Team 創(chuàng)建出來的. 以下是官網(wǎng)對Karma的相關特點介紹

支持真實瀏覽器, 無瀏覽器PhantomJS

熱更新，文件變化后自動測試

測試框架無關性 支持（Jasmine, Mocha, QUnit）

開源

易測試

持續(xù)集成

npm install -g karma
or 
npm install -D karma

karma init
or
karma init karma.conf.js

-- autoWatch 自動監(jiān)控更新
-- basePath 如果 basePath 為相對路徑， 則加上 __dirname作為前綴, 配合files
-- browsers 運行瀏覽器 ["Chrome", "Firefox"]
-- captureTimeout 如果瀏覽器在指定時間內(nèi)監(jiān)控失敗，karma將會刪殺死進程并重啟, 如果重試3次都失敗，則放棄啟動
-- colors 輸出是否輸出顏色
-- exclude 忽略加載的文件列表
-- files 瀏覽器訪問的文件列表
-- hostname 主機名
-- logLevel 日志等級 LOG_DISABLE, LOG_ERROR, LOG_WARN, LOG_INFO, LOG_DEBUG
-- loggers 日志輸出
-- port 端口號
-- preprocessors 預處理
-- proxies 代理配置
-- reportSlowerThan 運行慢時間標準, 0 表示不開啟
-- reporters
-- runnerPort karma run 端口
-- singleRun 是否逐個運行瀏覽器
-- urlRoot
-- jsVersion firexfox 瀏覽器支持

{
  files: [
    {pattern: "test/unit/*.js", watched: true, include: true, served: true},
    {pattern: "src/**/*.js", included: false},
    "test/test-main.js"
  ]
}

-- pattern 匹配的模式， 使用 minimatch庫匹配
-- watched 是否監(jiān)控文件變化
-- included 是否直接script引入
-- served 文件是否部署在 karma 的 web服務上
-- nocache 默認為 false，表示開啟緩存

karma start

如果使用 karma start 啟動了服務, 但沒通過監(jiān)聽文件變化自動運行測試腳本, 可以手動執(zhí)行karma run測試.

{
    browsers: ["Chrome", "Firefox"]
}

注意： 大多數(shù)瀏覽器啟動需要安裝插件

# Install the launcher first with NPM:
$ npm install karma-xxx-launcher --save-dev

{
  plugins: [
    "karma-chrome-launcher",
    "karma-firefox-launcher"
  ]
}

# Changing the path to the Chrome binary
$ export CHROME_BIN=/usr/local/bin/my-chrome-build

# Changing the path to the Chrome Canary binary
$ export CHROME_CANARY_BIN=/usr/local/bin/my-chrome-build

# Changing the path to the PhantomJs binary
$ export PHANTOMJS_BIN=$HOME/local/bin/phantomjs

激活代碼覆蓋率報告

{
    reporters: ["coverage"],
    preprocessors: {
      // source files, that you wanna generate coverage for
      // do not include tests or libraries
      // (these files will be instrumented by Istanbul)
      "src/**/*.js": ["coverage"]
    },

    coverageReporter: {
      type: "html",
      dir: "coverage/"
    }
}

type

html

lcov (lcov + html)

lcovonly

text

text-summary

cobertura

dir
輸出文件夾位置

file
type 為 text 或者 text-summary 時， file 有效， 生成指定文件

代碼預處理，可以使用 es6， ts 編寫js， 通過 babel 或 ts解釋器 進行轉(zhuǎn)換.

常見的預處理插件，karma-coverage, karma-webpack

{
  files: [
    "./index.js"
  ],
  preprocessors: {
    "./index.js": ["webpack", "sourcemap"]
  },
  webpack: webpackConfig, // webpack 配置
  webpackMiddleware: {
    noInfo: true
  },
  plugins: [
    "karma-jasmine",
    "karma-mocha-reporter",
    "karma-sourcemap-loader",
    "karma-webpack"  // 前提要求 webpack已經(jīng)包含
  ]
}