一、安装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
  })
}

八、推荐资料

1、karma官网 http://karma-runner.github.io/latest/index.html
2、karma github地址 https://github.com/karma-runner/karma
3、karma 安装教程 https://karma-runner.github.io/latest/intro/installation.html
4、参考资料 https://segmentfault.com/a/1190000015734861

九、单元测试Jest

1、使用Jest编写单元测试
2、web前端好帮手 - Jest单元测试工具 https://cloud.tencent.com/developer/article/1644430

十、端对端测试

1、cypress https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell
2、自动化的端到端测试工具，比如nightwatch

补充资料

1、不知道测试什么？这些是你需要知道的软件测试类型和常识
2、性能测试、负载测试 、压力测试和稳定性测试

image.png