如何通过反应测试库获得代码覆盖率答案

【问题标题】：how to get code coverage in react with react testing library如何通过反应测试库获得代码覆盖率
【发布时间】：2020-01-13 02:37:29
【问题描述】：

我使用 react 测试库（@testing-library/react & @testing-library/dom）和 jest-dom（@testing-library/jest-dom）编写了单元测试。我能够成功运行我的测试。

我没有使用 jest/jest-cli 完整包。我正在使用反应测试库和那个 jest-dom(@testing-library/jest-dom) 它可能是一些子包或者我不知道该怎么称呼它的东西。

如何使用反应测试库获得代码覆盖率？

【问题讨论】：

jest 内置了覆盖工具Istanbul。你只需要使用npm run test --coverage
不安装 jest/jest-cli 是不可能的吗？我的意思是@testing-library/jest-dom
RTL 不收集覆盖率。那是你的测试运行者的工作。按照@SandipNirmal 和@Harmenx 的建议运行npm run coverage
存在这个问题的实际答案：https://stackoverflow.com/questions/55991641/npm-test-coverage-never-exits

【解决方案1】：

嗯，create-react-app 给了你很多开箱即用的东西，但它也施加了一些限制......

您不能只将标志 --coverage 添加到 npm run test，因为该脚本已经在监视模式下运行您的测试（并且仅运行失败的测试以及您可以在交互模式下执行的其他操作会影响无论如何，你的报道报告）。

首先，以单次运行模式运行测试。

CI=true react-scripts test --env=jsdom

因为你已经在你的 package.json 中有一个测试任务，你可以这样简化你的任务：

CI=true npm test -- --env=jsdom

好吧，我们越来越近了…… 所以现在，在此之上添加--coverage 标志，您就已经准备就绪：

CI=true npm test -- --env=jsdom --coverage

总结你的 npm 任务可能是这样的：

"test:coverage": "CI=true npm test -- --env=jsdom --coverage"

您将在终端中看到您的报告并生成coverage 文件夹，顺便说一下，您可以在其中看到很多有用的信息！

【讨论】：

要使答案环境独立，您还可以使用cross-env npm 包：cross-env CI=true npm test -- --env=jsdom --coverage。否则在 Windows 上需要不同的语法。

【解决方案2】：

由于react-scripts已合并jest配置，您只需输入 npm run test --coverage 或 yarn test --coverage，生成覆盖率报告。

【讨论】：

【解决方案3】：

存在这个问题的实际答案：npm test -- --coverage never exits

RTL 不提供测试覆盖率统计信息，但 Jest 会在您运行时提供：

npm run test:coverage

【讨论】：