用karma+jasmine构建自动化测试环境

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 2.1k 阅读时长 ≈ 2 分钟

使用karma+jasmine 构建前端自动化测试环境

在项目下先安装karma 和 jasmine

1
npm install karma karma-jasmine karma-chrome-launcher --save-dev

安装karma的命令行

1
npm install karma-cli -g

在项目跟路径下初始化karma

1
karma init

需要选择初始化的选项，根据自己的需要设置初始化的设置(会生成一个karma.conf.js)

安装karma-coverage 生成代码覆盖率报告

1
npm install karma-coverage --save-dev

安装karma-coverage后需要在karma.conf.js 添加相应的配置信息

安装完成后，编写源文件以及相对应的测试文件

开始执行测试(会打开chrome 修改了源文件或测试文件后会自动重新执行测试)

1
karma start karma.conf.js

karma.conf.js 具体内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    // 要测试的源文件与测试文件的路径
    files: [
      'client/sdk/dist/*.js',
      'spec/**/*[sS]pec.js'
    ],
    // list of files to exclude
    exclude: [
    ],
    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    // 使用karma-coverage 生成对对应的源文件的 覆盖率报告
    preprocessors: {
      'client/sdk/dist/admin.js':'coverage'
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress','coverage'],
    // karma-coverage 生成报告的设置
    coverageReporter: {
      type : 'html',
      dir : 'spec/reporter/coverage/'
    },
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}