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可以看到是查妆后的代码：

完成