React前端功能测试覆盖率统计
1.React工程插桩教程
对于前端的覆盖率统计，单元测试的可以i通过jest和Enzyme配合进行单元测试并统计覆盖率，但是现在说的覆盖率主要是指功能测试的覆盖率。
而对于功能测试的测试覆盖率，肯定是需要进行代码插桩然后统计代码执行的密度，进行覆盖率统计，而插桩的库主流的就是istanbul
一，对于node项目
可以使用istanbul-middleware来进行插桩以及覆盖率统计，可以参考样例https://github.com/chenhengjie123/middleware-browser-coverage-demo
在依赖中添加istanbul-middleware和nopt，
然后使用istanbulMiddleware.hookLoader(__dirname , {verbose:true})来注入钩子返回插桩代码
app.use('/coverage', coverage.createHandler({ verbose: true, resetOnGet: true }));
app.use(coverage.createClientHandler(publicDir, { matcher: matcher }));
暴露/coverage来获取覆盖率，然后可以通过远程请求获取覆盖率或这定时i上报采集分析覆盖率，覆盖率信息保存至全局变量window.__coverage__中
二，对于React项目
因为React是属于客户端，react的代码，都会通过webpack打包编译成纯的js文件然后放到服务端当作静态文件执行，我们本地的环境实际
是通过React和node模拟了一个服务端，那么如果要进行覆盖率统计需要对react组件进行插桩然后编译成js执行。
插桩有两种方式，一种是nyc（istanbul的命令行接口），还有一种是使用babel插件
1.使用nyc方式，nyc instrument [input] [output]
nyc instrument src ..\monitortool\jddl-app-client-back\src
如果插桩失败的可以使用npm install -g [email protected]，这个问题i实际是高版本的nyc做出了一些限制，修改下配置也是可以的
新建一个工程作为采集服务：wind-common-middleware（采集服务）
将需要插桩的代码考到该工程中
cp -r wind-common/src wind-common-middleware
然后进入该工程
cd wind-common-middleware
进行插桩
nyc instrument src ../wind-common/src
启动wind-common
启动wind-common-middleware
问题：这种方式插桩后的代码编译失败，主要的问题有：
①.引用问题，引用必须在第一行，插桩后的引用不在第一行
②.引用代码被修改
import {Layout,Menu} from 'antd';被改成了import{Layout,Menu}from'antd';导致引用失效
③.某些代码查妆后不能执行
const{SubMenu}=Menu; ======> const{SubMenu}=(cov_28x5j2q2at.s[0]++,Menu);
2.使用插件方式
因为上面第一种方式的问题，那么我们可不可以插桩后再通过babel编译运行呢，
结果是不行的，代码似乎没有问题，没有了import也没有其他的语法问题，但是依然还是过不了react这一关，还是会报错，依然是之前的那些问题，那么这样只有一条路可以走了，是用babel编译后的代码进行插桩，使用插件babel-plugin-istanbul
首先项目的目录结构如下
引入依赖：
"@babel/cli": "7.7.7",
"babel-loader": "8.1.0",
"babel-plugin-istanbul": "6.0.0",
"@babel/preset-react": "7.8.0"
babel-cli是babel编译的主要依赖
babel-loader是文件处理器，在webpack的配置文件中需要配置react组件使用此loader来进行传输处理
babel-plugin-istanbul是插桩的主要依赖
babel-preset-react是react使用babel必须的依赖
新建.babelrc文件，内容
{
"presets": ["@babel/react"],
"plugins": ["istanbul"]
}
webpack.config.js文件如下
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader'
}]
}
]
}
};
package.json中的脚本文件如下
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
},
启动成功后，可以看到能够获取到window.__coverage__
看source可以看到是查妆后的代码：
完成
以上是 React前端功能测试覆盖率统计 的全部内容， 来源链接： utcz.com/z/381942.html
