前端覆盖率报告生成

潜龙9527 2024-06-30 17:03:01 阅读 72

前端精准测试是精准测试体系的一部分，但是由于前端项目比较灵活，各种框架，脚手架再加上开发同学写的不够规范，所以投入产出比较低，这部分内容在网上的资料也比较少。为了完善我们的精准测试体系，今年做了前端精准测试。精准测试的基础就是覆盖率，如何拿到覆盖率数据，生成覆盖率报告是核心。

一，覆盖率SDK的集成

前端覆盖率主要借助于istanbul （官方网站：https://istanbul.js.org ）来实现的，而主要的插件有如下：

1，babel的前端工程

istanbul提供的babel插件babel-plugin-istanbul（https://github.com/istanbuljs/babel-plugin-istanbul） , 能够在代码编译打包阶段直接植入插桩代码适用于使用babel的前端工程，基于react和vue的工程都可以。

（1）在package.json中添加插件

"babel-plugin-istanbul": "^6.1.1"

（2）在babel.config.js中添加

const plugins = []

//添加收集覆盖率插件

plugins.push([

"babel-plugin-istanbul", {

extension: ['.js', '.vue'],

}

])

module.exports = {

presets: [

'@vue/app'

],

plugins

}

（3）检查覆盖率数据的生成

编译工程，访问前端项目页面，在控制台访问：window.__coverage__，如果有数据，则说明项目插入babel-plugin-istanbul成功。

2，vite前端工程

如果针对vite(https://vitejs.cn/)前端项目，按如下方法添加：

（1）在package.json中添加插件

"babel-plugin-istanbul": "^6.1.1"

（2）在vite.config.ts中添加:

plugins: [ // vite作为子应用接入qinakun在开发模式下需要把react()关掉 // https://github.com/umijs/qiankun/issues/1257 ...(useDevMode ? [] : [ react( mode === 'test' ? { babel: { plugins: ['babel-plugin-istanbul'] } } : undefined ) ]), ... ]

（3）检查覆盖率数据的生成

编译工程，访问前端项目页面，在控制台访问：window.__coverage__，如果有数据，则说明项目插入babel-plugin-istanbul成功。

注意：如果是通过vite完全生成的React项目，可以按如下方式进行配置：

（1）安装vite-plugin-istanbul插件：

地址：https://github.com/iFaxity/vite-plugin-istanbul

npm i -D vite-plugin-istanbul

or if you use yarn

yarn add -D vite-plugin-istanbul

(2) 配置vite.config.js

添加引用：

import istanbul from 'vite-plugin-istanbul';

添加插件配置

istanbul({ include:['src/*'], extension:['.jsx'] })

最终的配置如下：

import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import istanbul from 'vite-plugin-istanbul';

// https://vitejs.dev/config/export default defineConfig({ plugins: [react(), istanbul({ include:['src/*'], extension:['.jsx'] }) ],})

启动项目，就可以得到覆盖率数据window.__coverage__

3，webpack前端工程

对于Webpack项目，需要使用另一个插件webpack-plugin-istanbul插件（https://github.com/smoosee/webpack-plugin-istanbul）

这个项目是最新发布的，显示是五个月前提交的代码，所以要求：node版本大于16，webpack至少是5。

（1）在项目中执行如下命令：

yarn add webpack-plugin-istanbul -D

（2）添加webpack配置

找到根目录下config/webpack.config.js文件，添加如下代码：

//覆盖率插件const { WebpackPluginIstanbul } = require("webpack-plugin-istanbul");

//添加插件plugins:[new WebpackPluginIstanbul({ include: ["src/*.js","src/*.ts","src/*.tsx"], exclude: ["src/**/*.spec.js"], extension: [".js",".ts",".tsx"], cwd: process.cwd(),}),...]//在module中添加配置module: { strictExportPresence: true, rules: [ { test: /\.(js|ts|tsx)$/, exclude: /node_modules/, use: { loader: "webpack-plugin-istanbul/loader", options: { include: ["src/*.js","src/*.ts","src/*.tsx"], exclude: ["src/**/*.spec.js"], extension: [".js",".ts",".tsx"], cwd: process.cwd(), }, }, }, ... ] }