reactjs - 使用Puppeteer + Istanbul进行React的代码覆盖率

我有一个使用create-react-app创建的应用程序，并且用Jest + Istanbul编写了一些UI测试。

我想获得这些UI测试的代码覆盖率。我喜欢继续使用开玩笑，因为我已经将其用于单元测试。

我想尽可能不弹出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）在Safari上动手进行持续集成和交付-包含有关Puppeteer + Jest测试的部分，未提及代码覆盖率。

6）我尝试了puppeteer-to-istanbul->我们可以通过这种方式计算捆绑软件的代码覆盖率，因为它不支持源地图。

7）尝试了Enselic的建议，但未能成功。尝试按下push时，自定义预设中的babel-plugin-istanbul方法似乎崩溃。

最佳答案

好像您在package.json文件中缺少collectCoverageFrom选项。

尝试在您的package.json中插入以下内容：

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

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

关于reactjs - 使用Puppeteer + Istanbul进行React的代码覆盖率，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53485370/