单元测试的认识

组成

一个单元测试的构成应该是
测试框架+断言库+其他辅助的库
所以要安装依赖的时候，也是要选择下载对应的模块，最少都要两个，一个测试框架+一个断言库

测试框架

jest，mocha，这两个都是，我贴一下网上查到的这两个都写法差别

例子：
sum函数

function sum(a, b) {
  return a + b;
}

Jest写法(自带断言库)

const sum = require('./sum');

describe('sum function test', () => {
  // 官方默认写法
  test('should be 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
})

mocha写法(外部断言库Chai)

const {expect, assert} = require('chai');
const sum = require('./sum');

describe('sum function test', () => {
  // BDD 方式
  it('should be 3 using expect', () => {
    expect(sum(1, 2)).to.equal(3);
  });

  // TDD 方式
  it('should be 3 using assert', () => {
    assert.equal(sum(1, 2), 3);
  });
});

具体细节我没去深究，就看这个例子，这两个不同的是一个用test,一个是用it，还有jest是自带断言库，mocha是要另外安装一个依赖实现

断言库

断言指的是上面代码里面，那些to.be，to.equal，to.not.be这种，拿这个mocha举例子

const {expect, assert} = require('chai');
const sum = require('./sum');

describe('sum function test', () => { // 这些是测试框架的语法
  // BDD 方式
  it('should be 3 using expect', () => { // 这些是测试框架的语法
    expect(sum(1, 2)).to.equal(3); // 这里是断言库语法
  });

  // TDD 方式
  it('should be 3 using assert', () => { // 这些是测试框架的语法
    assert.equal(sum(1, 2), 3); // 这里是断言库语法
  });
});

chai就是其中一个断言库，其他的话我百度找不到类似的，就不比较了，知道意思就好

辅助库

这个辅助库是我自己的理解，是根据我现在写的单元测试用到的，比如

sinon

我用到它的一个功能，就是判断这个点击事件是否真的执行了

// 点击事件
  it('click', () => {
    const f = sinon.spy()
    wrapper = mount(Button, {
      listeners: {
        click: f
      }
    })
    wrapper.trigger('click')
    expect(f.called).to.be.ok
  })

karma

这个百度的资料，它是帮助测试结果可以在浏览器跑起来，比如用mocha+chai的时候，你运行的时候，它是在node跑的，也就是说是在终端那里输出结果，没有在浏览器输出

如果想要在浏览器console那里输出，就要用到它，当然它的功能并不是只是输出这么简单，它还能让测试用例在浏览器跑，不同的浏览器跑测兼容，但是我没有用到，所以不知道 = =

覆盖率

一般搞这个东西之后，组长会要求什么覆盖率要达到多少才算通过测试，这里举karma的一个例子，
首先是怎么配这个覆盖率输出，网上教程是说安装karma-coverage,babel-plugin-istanbul,
然后一些配置，这个不仔细介绍了，因为这套测试不是我搭的，我也不是很清楚 = =

const webpackConfig = require('../../build/webpack.test')

module.exports = function(config) {
  config.set({
    browsers: ['Chrome'],
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    reporters: ['spec', 'coverage'], //这个coverage要写上
    files: [
      './specs/*.spec.js'
    ],
    preprocessors: {
      './specs/*.spec.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: { //这个配置也要
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '' },
        { type: 'text-summary' }
      ]
    }
  })
}

配置完了，项目用的是vue，所以执行npm run test之后，

Statements: 语句覆盖率，执行到每个语句；
Branches: 分支覆盖率，执行到每个if代码块；
Functions: 函数覆盖率，调用到程式中的每一个函数；
Lines: 行覆盖率, 执行到程序中的每一行。

组长的要求一般是指第一个，语句覆盖率，这里是全部测试用例跑完之后的汇总

如果你想定位到哪一测试用例拉低了整体覆盖率，你要找到test/coverage/locv-report/index.html，右键浏览器打开

这里就可以看到，然后你点进去组件，

数字代表测过几次，红色表示没有测过