Question

我有一个使用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）我还浏览了有关野生动物园书籍的 Node.js Web开发-第四版-我找到了有关Puppeteer的有用指南，但似乎没有涵盖代码覆盖范围。

5）关于野生动物园的书籍动手进行持续集成和交付-包含有关Puppeteer + Jest测试的部分，未提及代码覆盖率。

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

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

Answer 1

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

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

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

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