如何在反应测试库中获得代码覆盖率

Question

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

我没有使用 jest/jest-cli complete pacakge。我正在使用反应测试库和那个 jest-dom(@testing-library/jest-dom) 它可能是一些子包或我不确定到底该叫它什么的东西。

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

Answer 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生成文件夹，顺便说一下，您可以在其中看到很多有用的信息！

Answer 2

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

Answer 3

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

RTL 不提供测试覆盖率统计信息，但如果您将以下内容添加到 Jest 中，Jest 就会提供package.json：

"test:coverage": "react-scripts test --env=jsdom --watchAll=false --coverage"

然后你可以运行：

npm run test:coverage

有关更多详细信息，请参阅我上面链接的答案或上面 Watchmaker 的答案。