nyc coverage显示错误的行号

Question

我的小组正在使用以下前端堆栈构建应用程序:

• VueJS
• Webpack 2.2
• AvaJS(用于单元测试)
• nyc(伊斯坦布尔)进行测试

我们开始vue-cli为我们的项目创建一个Webpack模板.在大多数情况下,一切都很顺利.我们可以使用Ava 使用vue-node对单独的.vue组件文件进行单元测试.但是,通过nyc生成的测试覆盖率报告存在问题.下面是我们的package.json文件的片段,其中定义了相关的nyc和ava部分:

"nyc": {
    "exclude": [
        "build",
        "config",
        "static",
        "tests"
    ],
    "extension": [
        ".js",
        ".vue"
    ]
},
"ava": {
    "require": [
        "./tests/unit/helpers/setup.js",
        "ignore-styles"
    ]
},

所有测试都成功通过.该nyc报告显示以下内容:

问题是Uncovered Lines下列出的行#s 不存在.该.vue文件只有402线长,所以我想不通的地方在纽约报告这些线#分别来自何方.

任何帮助将不胜感激,并提前感谢您.

Answer 1

我遇到了同样的问题，您需要安装babel-plugin-istanbul带有伊斯坦布尔覆盖范围的代码。该插件负责获取适合sourceMap您的代码的权利。因此您需要禁用 Instrument 和sourceMapfrom nyc。

npm install --save-dev babel-plugin-istanbul

在该.babelrc文件（通常位于项目的根文件夹中）中添加以下内容，以便仅由您的测试环境使用：

{
  "env": {
    "test": {
      "plugins": [ "istanbul" ]
    }
  }
}

然后禁用仪器并sourceMap从nyc. babel-plugin-istanbul会照顾它的。并将您的替换"require": "nyc"为"require": "babel-register".

"nyc": {
  "exclude": [
    "build",
    "config",
    "static",
    "tests"
  ],
  "extension": [
    ".js",
    ".vue"
  ],
  "require": [
    "./tests/unit/helpers/setup.js",
    "ignore-styles",
    "babel-register"
  ],
  "sourceMap": false,
  "instrument": false
},

现在您应该能够获得nyc.

NODE_ENV=test nyc ava

资料来源：

1. https://www.npmjs.com/package/babel-plugin-istanbul
2. https://github.com/istanbuljs/nyc#use-with-babel-plugin-istanbul-for-babel-support