测试覆盖率

https://vue-test-utils.vuejs.org/zh/guides/testing-single-file-components-with-karma.html

1. yarn add -D karma-coverage cross-env
2. yarn add -D babel-plugin-istanbul

3. 在babel.js里添加

"env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }

4. 现在更新 karma.conf.js 文件来进行覆盖率测试。添加 coverage 到 reporters 数组，并添加一个 coverageReporter 字段：

// karma.conf.js
module.exports = function(config) {
  config.set({
    // ...

    reporters: ['spec', 'coverage'],

    coverageReporter: {
      dir: './coverage',
      reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }]
    }
  })
}

5. 然后更新 test 脚本来设置 BABEL_ENV：

// package.json
{
  "scripts": {
    "test": "cross-env BABEL_ENV=test karma start --single-run"
  }
}

6. 运行yarn test

运行 open coverage/lcov-report/index.html可以打开对应的页面

上面标红的是没有测试过的，绿的是测试过的，1x就是测试了一遍
1.statements：语句单元测试覆盖率
2.Functions：函数覆盖率（五个函数，那就是每个都是百分之二十）
3.Branches: 分支覆盖率（针对代码中的if else）

functon fn(n) {
  let n = 5
  if (n < 10) {
    return '小 '
  } else {
    return '大'
  }
}

上面的代码有两个分支，默认一开始分支覆盖率是0

上面的代码对小于10的进行了单元测试，所以现在的分支覆盖率就是50%

4. Lines：多少行