介紹

前身 Testacular， AngularJs Team 創(chuà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 如果瀏覽器在指定時間內監(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 配置介紹

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

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

# 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

Coverage 代碼覆蓋率

激活代碼覆蓋率報告

{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 有效， 生成指定文件

Preprocessors 預處理插件

• 代碼預處理，可以使用 es6， ts 編寫js， 通過 babel 或 ts解釋器 進行轉換.
• 常見的預處理插件，karma-coverage, karma-webpack

基于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已經包含] }

總結

以上是生活随笔為你收集整理的【Karma】多环境自动测试框架 -- 基础教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。