vue项目代码覆盖率报告生成

目标:
在本地代码运行时 通过点击触发代码覆盖率报告的生成 在代码覆盖率报告中显示自己的各个代码文件执行代码的百分比

首先使用 vue-cli 创建一个新项目 项目名称为 istanbul

vue create istanbul

进入项目 并下载包

cd istanbul
yarn

下载插件

yarn add --dev babel-plugin-istanbul chalk concurrently live-server nodemon rimraf axios express nyc

babel-plugin-istanbul 代码覆盖率的 babel 版支持工具
chalk 控制台输出带色儿的文字
concurrently 一次运行多个命令
live-server 自动刷新浏览器标签页的本地服务
nodemon 监听文件并自动刷新的 nodejs 本地服务
rimraf 删除文件和文件夹
axios 网络请求
express 本地服务
nyc 代码覆盖率报告生成工具

修改 babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'istanbul',
      {
        "useInlineSourceMaps": false,
        extension: ['.js', '.vue']
      }
    ]
  ]
};

修改 package.json 文件

  "scripts": {
    "test": "concurrently \"npm run nodemon\" \"npm run serve\"",
    "nodemon": "nodemon autoIstanbul.js --watch",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "nyc": {
    "reporter": [
      "html",
      "text-summary"
    ],
    "extension": [
      ".js",
      ".vue"
    ]
  },

在 src/ 目录中添加文件 nycClient.js 用于前端项目触发代码覆盖率报告

import axios from 'axios';
let istanbulSync = () => {
  axios.post(
    'http://127.0.0.1:11118/istanbulSync',
    {
      coverage: JSON.stringify(window.__coverage__)
    },
    (res) => {
      console.log('res', res);
    }
  );
};
window.onload = () => {
  istanbulSync();
};
document.body.addEventListener('click', istanbulSync);

在 main.js 中引入 nycClient.js 文件

import './nycClient.js';

最关键的一步 自动覆盖率报告本地服务文件

创建 autoIstanbul.js 放到根目录

const fs = require('fs');
const express = require('express');
const app = express();
const { execSync } = require('child_process');
const liveServer = require('live-server');
const chalk = require('chalk');
const rimraf = require('rimraf');
// 清空文件夹
rimraf.sync('./.nyc_output/');
fs.mkdirSync('./.nyc_output');
// 设置跨域
app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.headers.origin);
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});
// 设置接收json的大小
app.use(express.json({
  limit: '100mb'
}));
app.use(express.urlencoded({ extended: true }));
// 设置静态页面 自测用的
app.get('*', (req, res) => {
  res.send('autoIstanbul.js');
});
// 接收前端传参
app.post('/istanbulSync', async (req, res) => {
  let parse = JSON.parse(req.body.coverage);
  let date = new Date().getTime();
  fs.writeFileSync(`./.nyc_output/${date}.json`, JSON.stringify(parse));
  let message = '代码覆盖率同步成功!';
  try {
    execSync('nyc report --reporter=html', { encoding: 'utf8' });
  } catch (error) {
    message = '代码覆盖率同步失败!' + error;
  }
  console.log(chalk.green(message));
  res.send(`${message}, 实时预览地址: http://localhost:11119`);
});
// 启动代码覆盖率后端服务
app.listen(11118, () => {
  console.log(chalk.cyan('listening sync: http://localhost:11118'));
});
// 启动代码覆盖率前端标签页自动刷新服务
let params = {
  port: 11119,
  host: '0.0.0.0',
  root: './coverage',
  open: false,
  file: 'index.html',
  logLevel: 0,
  middleware: [
    function(req, res, next) {
      next();
    }
  ]
};
liveServer.start(params);
console.log(chalk.cyan('listening showHtml: http://localhost:11119'));

运行项目

yarn test

查看 vue 项目

http://localhost:8080

查看代码覆盖率报告

http://localhost:11119

image.gif