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

前身 Testacular， AngularJs Team 創(chuàng)建出來(lái)的. 以下是官網(wǎng)對(duì)Karma的相關(guān)特點(diǎn)介紹

支持真實(shí)瀏覽器, 無(wú)瀏覽器PhantomJS

熱更新，文件變化后自動(dòng)測(cè)試

測(cè)試框架無(wú)關(guān)性 支持（Jasmine, Mocha, QUnit）

開(kāi)源

易測(cè)試

持續(xù)集成

npm install -g karma
or 
npm install -D karma

karma init
or
karma init karma.conf.js

-- autoWatch 自動(dòng)監(jiān)控更新
-- basePath 如果 basePath 為相對(duì)路徑， 則加上 __dirname作為前綴, 配合files
-- browsers 運(yùn)行瀏覽器 ["Chrome", "Firefox"]
-- captureTimeout 如果瀏覽器在指定時(shí)間內(nèi)監(jiān)控失敗，karma將會(huì)刪殺死進(jìn)程并重啟, 如果重試3次都失敗，則放棄啟動(dòng)
-- colors 輸出是否輸出顏色
-- exclude 忽略加載的文件列表
-- files 瀏覽器訪問(wèn)的文件列表
-- hostname 主機(jī)名
-- logLevel 日志等級(jí) LOG_DISABLE, LOG_ERROR, LOG_WARN, LOG_INFO, LOG_DEBUG
-- loggers 日志輸出
-- port 端口號(hào)
-- preprocessors 預(yù)處理
-- proxies 代理配置
-- reportSlowerThan 運(yùn)行慢時(shí)間標(biāo)準(zhǔn), 0 表示不開(kāi)啟
-- reporters
-- runnerPort karma run 端口
-- singleRun 是否逐個(gè)運(yùn)行瀏覽器
-- 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庫(kù)匹配
-- watched 是否監(jiān)控文件變化
-- included 是否直接script引入
-- served 文件是否部署在 karma 的 web服務(wù)上
-- nocache 默認(rèn)為 false，表示開(kāi)啟緩存

karma start

如果使用 karma start 啟動(dòng)了服務(wù), 但沒(méi)通過(guò)監(jiān)聽(tīng)文件變化自動(dòng)運(yùn)行測(cè)試腳本, 可以手動(dòng)執(zhí)行karma run測(cè)試.

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

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

# 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

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

{
    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 時(shí)， file 有效， 生成指定文件

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

常見(jiàn)的預(yù)處理插件，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)包含
  ]
}