使用 Istanbul + Webpack 覆盖 JSX 文件的代码答案

【问题标题】：Code coverage on JSX files with Istanbul + Webpack使用 Istanbul + Webpack 覆盖 JSX 文件的代码
【发布时间】：2016-07-23 23:51:58
【问题描述】：

我正在尝试使用 (webpack/karma) 为我的反应组件生成伊斯坦布尔覆盖率报告。但是生成的报告显示了转译后的代码，并且充满了（必要的）代码。

有没有办法在转译报告中的 JSX 代码之前查看或者至少只查看真实的应用程序代码？

我在karma.conf.js 中使用了一个 istanbul-instrumenter 作为 postLoader：

webpack: {
    postLoaders: [ { 
        //delays coverage til after tests are run, fixing transpiled source coverage error
        test: /\.jsx$/,
        exclude: /(test|node_modules|bower_components)\//,
        loader: 'istanbul-instrumenter' }
    ]
}

【问题讨论】：

你应该可以用 babel-node 做到这一点

标签： javascript reactjs webpack istanbul karma-coverage

【解决方案1】：

我刚刚通过将istanbul-instrumenter-loader 更改为babel-istanbul-instrumenter-loader 解决了这个问题。

遵循所需的配置：

 preLoaders: [
   // transpile and instrument only testing sources with babel-istanbul
   {
     test: /.jsx?$/,
     loader: 'babel-istanbul',
     include: [
       path.resolve(__dirname, "/src/"), // My tests are under src folder :(
     ],
     query: {
       cacheDirectory: true
     }
  }
]

【讨论】：