前端单元测试环境搭建——Karma+Mocha+Chai

前端单元测试环境搭建——Karma+Mocha+Chai

1、Karma

安装

npm install karma --save-dev 或yarn add karma --dev

配置

在安装完成karma后，要新建一个karma.conf.js文件来进行karma的配置，大致代码如下，后面会介绍配置的相关含义。

// karma.conf.js

// webpack配置
const webpackConfig = require('../../build/webpack.test.conf')
module.exports = (config) => {
  config.set({
    files: ['specs/**/*.spec.js'],
    // karma plugin
    plugins: [
      'karma-chrome-launcher',
      'karma-webpack',
      'karma-mocha',
      'karma-chai',
      'karma-spec-reporter',
      'karma-coverage'
    ],
    browsers: ['Chrome'],
    frameworks: ['mocha', 'chai'],
    reporters: ['spec', 'coverage'],
    // karma-coverage plugin options
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    },
    preprocessors: {
      // add webpack as preprocessor
      'specs/**/*.spec.js': ['webpack', 'coverage']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      // webpack-dev-middleware configuration
      // i. e.
      stats: 'errors-only'
    },
    client: {
      mocha: {
        timeout: 4000
      }
    }
  })
}

files

files就是指定编写要进行测试的文件，karma会自动运行匹配到的所有文件。这里的配置为specs/**/*.spec.js，也就是specs文件夹下的所有的.spec.js文件。

plugins

plugins是karma最重要的一个配置之一，后面介绍的配置几乎都是依赖对应的plugin运行的。karma提供了相当丰富的插件和开发插件的机制，便于你实现自己的插件，具体可以查看karma的plugin相关文档。我们可以通过npm或yarn安装这些插件进行自定义组合，来实现我们的功能。

在上面的配置中，使用到了karma-chrome-launcher, karma-webpack, karma-mocha, karma-chai, karma-spec-reporter, karma-coverage六个插件，这些插件都会在下面的配置中介绍到。

browser

该配置为karma的浏览器启动配置，可以控制karma启动什么浏览器。可选值如下：

• Chrome (launcher requires karma-chrome-launcher plugin)
• ChromeCanary (launcher requires karma-chrome-launcher plugin)
• ChromeHeadless (launcher requires karma-chrome-launcher plugin ^2.1.0)
• PhantomJS (launcher requires karma-phantomjs-launcher plugin)
• Firefox (launcher requires karma-firefox-launcher plugin)
• Opera (launcher requires karma-opera-launcher plugin)
• IE (launcher requires karma-ie-launcher plugin)
• Safari (launcher requires karma-safari-launcher plugin)

这里使用的配置为Chrome，依赖的插件为karma-chrome-launcher。你也可以通过配置空数组让karma不启动浏览器。

frameworks

frameworks是对测试框架的配置，这边使用的是mocha+chai，依赖了karma-mocha和karma-chai插件。当然，你也可以使用其他的测试框架，如：jasmine、qunit等。

reporters

接下来是reporters的配置，reporters是karma在跑完测试之后，关于测试结果报告的配置，这边选用的配置是spec和coverage，spec是报告详细的测试结果，coverage是报告代码测试的覆盖率。下面的coverageReporter配置也是coverage reporter的相关配置。关于这两个reporter的详细信息，可以查看 karma-spec-reporter，karma-coverage

preprocessors

preprocessors是关于测试文件的预处理器配置，karma允许在启动浏览器之前对指定的文件进行预处理，这里我们使用的预处理器是webpack和coverage。webpack预处理器就是使用webpack对文件打包和编译，下面的webpack和webpackMiddleware配置都是webpack预处理器相关的配置项。具体信息可以查看 karma-webpack

client

最后一个client配置是karma-mocha插件提供的一个关于客户端的配置提供了超时时间等配置，具体配置可以查看 karma-mocha

上面就是关于karma的一部分基础配置，详情配置请访问karma的 官方文档

2、测试用例编写

完成了karma的配置后，接下去就要进行单元测试用例的编写了，单元测试用例的编写并不复杂，相当于另外编写了一套程序，把业务逻辑中的脚本文件当做模块引入，模拟其运行环境（例如需要的浏览器类型，全局变量等），然后使用一组或若干组覆盖不同使用场景的参数来调用想要测试的函数单元，并判断函数返回的结果是否和预期的相同。

进行测试用例编写主要使用的是mocha所提供的测试架构以及chai所提供的断言功能。

Mocha

mocha是前端自动化测试框架，提供了不同风格断言库的兼容，测试用例分组，同步、异步测试架构，生命周期钩子等能力。

describe('功能测试',function(){
    // 同步代码测试
    describe('同步功能',function(){
        it('1 + 2 = 3',function(){
            // 调用相关代码及设置断言
        })
    });
    // 异步代码测试
    describe('异步功能',function(){
        it('某个变量的值应该是数字',function(done){
            // 调用相关代码及设置断言
            // 手动调用done()表示异步结束
        })
    });
    // mocha hooks
    before(function() {
    // runs before all tests in this block
    });
    after(function() {
        // runs after all tests in this block
    });
    beforeEach(function() {
        // runs before each test in this block
    });
    afterEach(function() {
        // runs after each test in this block
    });
})

Chai

Chai是一个断言库合集，支持expect,assert,should断言语法。使用示例：

expect(bar).to.not.exist;// 断言变量bar不存在
expect(data).to.have.ownProperty('length');// 断言data有length属性
expect(name).to.be.a('string');// 断言name是一个字符串
assert.equal(value1,value2);// 断言value1和value2相等

实例

// calculate.js
export default {
  add (a, b) {
    return a + b
  },
  minus (a, b) {
    return a - b - 1
  }
}


// calculate.spec.js
import calculate from '@/js/calculate'

describe('calculate test', () => {
  it('function add should return right sum', () => {
    expect(calculate.add(1, 2))
      .equal(3)
  })
  it('function minus should return right value', () => {
    expect(calculate.minus(2, 1)).equal(1)
  })
})

3、运行

完成了karma的配置以及测试用例的编写后，就要运行karma对测试脚本进行分析。可以直接在命令行使用karma start karma.conf.js，也可以在package.json中的scripts里进行配置

// package.json
{
    "scripts": {
        "unit": "karma start karma.conf.js"
    }
}

执行npm run unit即可

在运行完成之后，我们会得到一份结果报告

运行结果错误的测试用例会被非常清晰的标注，由于我们在上面配置了coverage reporter，所以在下面会有一个coverage summary的分析报告。

4、总结

前端单元测试环境的搭建主要使用的是Karma+Mocha+Chai，主要流程为Karma的配置、测试用例的编写以及Karma的运行三个步骤。最重要的步骤为karma的配置，其中涉及到了plugin的安装以及各个配置项的配置。

最后，现在vue-cli中已经集成了Karma+Mocha的测试环境，只需在使用vue-cli初始化时Set up unit tests配置选择相应选项即可一键完成基于Karma+Mocha的前端单元测试环境的搭建。