Karma入门简易教程及注意的坑

2020-05-25 本文已影响0人该帐号已被查封_才怪

一、安装Karma 和插件

# 初始化
$npm init
# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

二、安装命令行

如果不安装karma-cli，使用karma指令时需要添加./node_modules/karma/bin/前缀，安装karma-cli后，可以直接运行karma start

$ npm install -g karma-cli

三、初始化karma

karma init

$ karma init
// 选择测试框架，这里我选择jasmine
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

// 是否引入Require.js，不需要
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no 

// 选择使用的浏览器，可以使用['Firefox', 'Chrome', 'ChromeHeadless', 'ChromeCanary', 'Safari', 'PhantomJS', 'Opera', 'IE']
// 这里也可以选择多个浏览器，测试用例将在多个浏览器里执行
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
>Firefox 
>Chrome
>IE
>

// 告诉需要执行的测试用例的代码路径，支持正则,可以写多个（键入空白执行下一步）
// 如果不小心按了回车键  可以在karma.conf.js中的 ```files:[]``` 直接填写    files: ['test/**.js'],
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> test/**/*.js


// 上面指定的路径中需要排除在外的文件
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

// 是否观察文件的变化,自动测试
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes


Config file generated at "E:\demo\karma-test\karma.conf.js".

四、安装新的依赖

// 自动安装package.json新增的依赖项
$ npm install

// 安装jasmine框架
$ npm install jasmine-core --save-dev

五、编写测试用例

1、在test目录下新建index.js和index.spec.js文件；
index.js文件如下：

// 加法函数
function add(x){
    return function(y){
        return x + y+1;
    }
}

// 乘法函数
function multi(x){
    return function(y){
        return x * y;
    }
}

index.spec.js 文件如下

describe("测试加法和乘法运算",function(){
    it("加法测试",function(){
        var add5 = add(5)
        expect(add5(5)).toBe(10)
    });

    it("乘法测试",function(){
        var multi5 = multi(5)
        expect(multi5(5)).toBe(25)
    })
})

六、运行单元测试

karma start

加法测试失败了但是乘法测试成功了

image.png

此时我们看到加法测试在三个浏览器里都失败了但是乘法测试成功了，改一下加法测试的代码即可;

七、测试覆盖率

$ npm install karma-coverage --save-dev

修改karma.conf.js配置

// Karma configuration

module.exports = function(config) {
  config.set({
    ...
    // 这里配置哪些文件需要统计测试覆盖率，例如，如果你的所有代码文件都在 src文件夹中，你就需要如下配置。
    preprocessors: {
        'src/*.js': 'coverage'
    },
    // 新增 coverageReporter选项
    // 配置覆盖率报告的查看方式,type查看类型，可取值html、text等等，dir输出目录
    coverageReporter: {
        type: 'html',
        dir: 'coverage/'
    },

    // 添加配置报告选择
    reporters: ['progress','coverage'],
    
    ...
  })
}

再次执行karma start，我们能看到生成了coverage目录，在浏览器中打开目录中的index.html我们能看到覆盖率已经生成

image.png

karma.conf.js文件

// Karma configuration
// Generated on Mon May 25 2020 15:02:21 GMT+0800 (中国标准时间)

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: [
        'test/**.js'
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
      // 这里配置哪些文件需要统计测试覆盖率，例如，如果你的所有代码文件都在 test文件夹中，你就需要如下配置。
      preprocessors: {
        'test/*.js': 'coverage'
    },
      // 新增 coverageReporter选项
      // 配置覆盖率报告的查看方式,type查看类型，可取值html、text等等，dir输出目录
      coverageReporter: {
          type: 'html',
          dir: 'coverage/'
      },




    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
      // 添加配置报告选择
      reporters: ['progress','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: ['Firefox', 'Chrome', 'ChromeHeadless', 'ChromeCanary', 'Safari', 'PhantomJS', 'Opera', 'IE'],
    browsers: ['Firefox', 'Chrome', 'IE'],


    // 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
  })
}