reactjs - React 与 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

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

如何解决这个问题？

<小时/>

其他失败的尝试:

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 的库，但它不支持源 map 。 (问题见链接)

4) 我还查看了 safaribooks 上的 Node.js Web Development - Fourth Edition 这本书 - 我找到了 Puppeteer 的有用指南，但它似乎没有涵盖代码覆盖率。

5) safaribooks 上的《持续集成和交付实践》一书 - 有一个关于 Puppeteer + Jest 测试的部分，没有提及任何有关代码覆盖率的内容。

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

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

Answer 1

你好像缺少collectCoverageFrom package.json 文件中的选项。

尝试在 package.json 中插入类似以下内容:

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

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