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

Posted 2023-02-19

【中文标题】React 与 Puppeteer + 伊斯坦布尔的代码覆盖率

【英文标题】：Code Coverage on React with Puppeteer + Istanbul

【发布时间】：2019-04-28 08:23:15

【问题描述】：

我有一个使用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 方法上崩溃。

【问题讨论】：

嗨，我是提交github.com/facebook/create-react-app/issues/3257 的人。仅供参考，我最终做了一个“部分弹出”，即只弹出 build.js 和依赖项（请参阅github.com/Enselic/sequencediagram.io/commit/…）然后您可以添加自己的预设以增加代码覆盖率（请参阅github.com/Enselic/sequencediagram.io/blob/master/config/…），同时仍然保留其他反应的好处-脚本部分而不会使您的存储库膨胀。

@Enselic 好的，谢谢，我会尝试这种方法。只是好奇你做了什么来部分弹出，复制新东西，并使用 git 恢复，复制必要的东西回来？。顺便说一句，这也是一些不错的软件（已加星标）。

是的，完全正确：为了部分弹出，我做了一个完整的、正常的弹出，然后手动撤消了我不想弹出的内容。很高兴听到你喜欢我的项目，并感谢你的星星 :)

最后我决定专注于编写更多的单元测试。我也尝试了@Enselic 的建议，但我无法让它发挥作用。 :) 我会保留这个问题，看看是否有人有更多想法。一旦允许赏金，我也会尝试。

【参考方案1】：

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

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

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

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

【讨论】：

collectCoverageFrom 不是这里的问题。我已经定义了它，它在单元测试中运行良好。这不是用于单元测试，而是用于 UI 测试，所以我需要从浏览器中运行的内容中获取覆盖范围。

好的，我明白了，您是否尝试过使用官方文档的方法？ github.com/GoogleChrome/puppeteer/blob/master/docs/…

这不起作用，因为 create-react-app 使用 webpack 转译（js 2 js 编译）js 文件。我已经试过了。它为无用的 js 包创建了覆盖范围。

github上有讨论可能对你有帮助github.com/istanbuljs/puppeteer-to-istanbul/issues/…

它有从浏览器github.com/smokku/wrte/blob/62059a4/test/runner.js#L36转移木偶覆盖范围的示例实现@