与Puppeteer + Istanbul反应的代码覆盖率

Question

我创建了一个应用程序,create-react-app并在Jest + Istanbul中编写了一些UI测试.

我想获得这些UI测试的代码覆盖率.我喜欢继续使用jest,因为我已经将它用于单元测试.

create-react-app如果可能的话,我不想弹出.但如果别无选择,我会对此持开放态度.

到目前为止我尝试过的:

在 package.json

"scripts": {
  "uitest": "react-scripts test --env=jsdom --verbose --testMatch='**/*.ui-test.{js}'",
}

如果我跑 npm run uitest -- --coverage

^我认为在上面的场景中它只捕获测试而不是实际的App.

我该如何解决？

---

其他尝试失败:

1)如何覆盖伊斯坦布尔的React jsx文件？ - 不要像我使用的那样申请create-react-app

2)https://github.com/facebook/create-react-app/issues/3257 - 显然这个功能被提出但被拒绝了.

3)https://github.com/istanbuljs/puppeteer-to-istanbul/issues/18 - 有一个名为puppeteer-to-istanbul的库,但它不支持源映射.(参见问题链接)

4)我也查看了关于safaribooks的Node.js Web开发 - 第四版的书 - 我找到了一个有用的Puppeteer指南,但它似乎没有涵盖,代码覆盖率.

5)在safaribooks上预订动手持续集成和交付 - 有一个关于Puppeteer + Jest测试的部分,没有说明代码覆盖率.

6)我试过puppeteer-to-istanbul- >我们可以通过这种方式计算bundle的代码覆盖率,它不支持源映射.

7)尝试了Enselic的建议,但无法使其正常工作.push尝试推送时,它似乎在自定义预设中的方法崩溃babel-plugin-istanbul.

Answer 1

您的文件中似乎缺少collectCoverageFrom选项package.json。

尝试插入到您的package.json类似内容中：

  "jest": {
    ...
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!**/setupTests.js",
      "!**/**/*.test.js"
    ],

另外，跳过测试文件的覆盖范围也是个好主意，因为它会破坏整体覆盖范围。对于这种情况，请!在collectCoverageFrom数组中使用，如示例所示；）