【Karma】多环境自动测试框架 -- 基础教程

介绍

前身 Testacular， AngularJs Team 创建出来的. 以下是官网对Karma的相关特点介绍

1. 支持真实浏览器, 无浏览器PhantomJS
2. 热更新，文件变化后自动测试
3. 测试框架无关性 支持（Jasmine, Mocha, QUnit）
4. 开源
5. 易测试
6. 持续集成

安装

npm install -g karma
or 
npm install -D karma

配置

karma init
or
karma init karma.conf.js

配置项

-- autoWatch 自动监控更新
-- basePath 如果 basePath 为相对路径， 则加上 __dirname作为前缀, 配合files
-- browsers 运行浏览器 ['Chrome', 'Firefox']
-- captureTimeout 如果浏览器在指定时间内监控失败，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 是否监控文件变化
-- included 是否直接script引入
-- served 文件是否部署在 karma 的 web服务上
-- nocache 默认为 false，表示开启缓存

启动

karma start

如果使用 karma start 启动了服务, 但没通过监听文件变化自动运行测试脚本, 可以手动执行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已经包含
  ]
}