React 与 Puppeteer + 伊斯坦布尔的代码覆盖率

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

^ 我认为在上面的场景中它只捕获测试而不是实际的应用程序。

我该如何解决这个问题？

---

其他失败的尝试：

1) How to cover React jsx files in Istanbul? - 不要申请，因为我正在使用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) Hands-On Continuous Integration and Delivery on safaribooks - 有一个关于 Puppeteer + Jest 测试的部分，没有提及代码覆盖率。

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

7) 尝试了 Enselic 的建议，但未能成功。尝试推送babel-plugin-istanbul 时，它似乎在自定义预设内的push 方法上崩溃。

Answer 1

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

尝试在您的package.json 中插入类似：

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

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