前端单元测试，看透这一篇足以

最新推荐文章于 2023-06-01 13:08:09 发布

基因改造者

最新推荐文章于 2023-06-01 13:08:09 发布

阅读量4.5k

点赞数

分类专栏：前端单元测试文章标签：前端单元测试 karma karma-cli karma.conf.js

本文链接：https://blog.csdn.net/z1324402468/article/details/94404220

版权

前端单元测试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Karma

Karma 是一个基于 Node.js 的Javascript 测试执行过程管理工具（test runner）。

Karma 可用于测试所有主流web浏览器，可以集成到持续集成工具里面。

下面我们用Chrome浏览器，测试框架用mocha ，断言库用chai。

1、安装Karma及插件

//安装karma
$ npm install karma --save-dev
//安装karma命令行工具
$ npm intall -g karma-cli
//安装我们项目中需要的插件
$ npm install karma-mocha karma-chrome-launcher karma-chai karma-coverage karma-spec-reporter --save-dev

2、生成配置文件

使用如下命令生成配置文件

karma init karma.conf.js

框架选择 mocha
浏览器选择Chrome
reporters 选择coverage
colors 选择 true

3、启动 Karma

使用配置文件启动 karma

karma start karma.conf.js

karma start 后面紧跟配置文件的路径
默认不写配置文件路径也可以，karma会自动寻找配置文件。

或者

"scripts": {
	"unit": "./node_modules/.bin/karma start test/unit/karma.conf.js --single-run"
}

–single-run意思是单次执行测试，此处会覆盖上面的singleRun配置项。最终会在test/unit/coverage目录下生成测试覆盖率的html格式报告。

4、简单了解 Karma 工作原理

karma 会生成一个服务器，该服务器通过连接的浏览器测试执行的源代码。浏览器会通过命令行的形式把测试结果显示给开发人员。

karma 会监听配置文件制定的所有文件，当监听文件发生变化时，karma会通过向测试服务器发送一个信号来通知捕获的浏览器再次运行测试代码，从而触发测试运行。浏览器会通过iframe加载源文件，执行测试并将结果报告给服务器。

5、配置文件（karma.conf.js）

module.exports = function(config) {
  config.set({

    // 基础路径
    basePath: '',


    // 测试框架
    // 可用的测试框架: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha','chai'],


    // 需要加载到浏览器的文件列表，浏览器将按照数组的顺序加载文件
    //file 数组文件决定了哪些文件包含在浏览器，哪些文件会karma被监听
    files: [
	    '../../src/js/one.js',
	    'space/test_*.js'
    ],


    // 排除的文件列表
    exclude: [
    ],


    // 在将匹配文件提供给浏览器之前对其进行预处理
    // 可用的预处理: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      '../../src/js/*.js':['coverage']
    },


    // 要使用的测试结果报告
    // 可能的值: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress','coverage'],

    /**
     * 使用reporters为"coverage"时报告输出的类型和那目录
     * html (default)
     * lcov (lcov and html)
     * lcovonly
     * text
     * text-summary
     * cobertura (xml format supported by Jenkins)
     */
    coverageReporter: {
      // 指定公用输出目录
      // dir: 'coverage',
      reporters: [
        // reporters not supporting the `file` property
        {type: 'html', dir: 'coverage'},
        // { type: 'lcov', subdir: 'report-lcov' },
        // // reporters supporting the `file` property, use `subdir` to directly
        // // output them in the `dir` directory
        // { type: 'cobertura', subdir: '.', file: 'cobertura.txt' },
        // { type: 'lcovonly', subdir: '.', file: 'report-lcovonly.txt' },
        // { type: 'teamcity', subdir: '.', file: 'teamcity.txt' },
        // { type: 'text', subdir: '.', file: 'text.txt' },
        {type: 'text-summary'}
      ]
    },

    // 服务端口号
    port: 9876,


    // 启用或者禁用输出报告中的颜色
    colors: true,


    // 日志等级
    // 可选值: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // 启用或禁用自动检测文件变化进行测试
    autoWatch: true,


    // 使用的浏览器
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    // browsers: ['Chrome','PhantomJS'],
    browsers: ['Chrome'],


    // 集成测试模式
    // 如果设置为true，Karma 将打开浏览器，执行测试
    singleRun: false,

    // 并发级别
    // 可以同时启动多个浏览器
    concurrency: Infinity
  })
};

6、来个例子

（1）项目目录

├─src
│ ├─css
│ ├─html
│ ├─image
│ ├─js
│ └─plugins
└─test
│ └─unit
│ │ └─space

（2）js里面文件

one.js

function add(x, y) {
  return x+y;
}

unit > space 里面放的单元测试代码

//space > test_one.js
describe('add function test',function () {
  it('1+1=2',function () {
    expect(add(1,1)).to.be.equal(2);
  });

  it('1-1=0',function () {
    expect(add(1,-1)).to.be.equal(0);
  })
})