我在从 package.json
中的脚本运行完整测试覆盖率时遇到了一些困难。我的 create-react-app . repo 链接 here ;
package.json
{
"name": "React Kitchen Sink",
...
"dependencies": {
...
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "^3.4.4"
},
"scripts": {
"start": "react-scripts -r @cypress/instrument-cra start",
"start:silent": "BROWSER=none yarn start",
"start:server": "start-server-and-test start:silent http://localhost:3000",
"build": "react-scripts build",
"eject": "react-scripts eject",
"jest:test": "react-scripts test --env=jest-environment-jsdom-sixteen",
"jest:coverage": "react-scripts test --env=jest-environment-jsdom-sixteen --watchAll=false --coverage",
...
...
运行yarn jest:test
以覆盖范围的监视模式开始测试,如果我按 a
然后我得到所有测试通过的报告但如果我这样做
yarn jest:coverage
然后所有测试失败错误看起来像这样:
FAIL src/components/Photo/index.test.js
● Console
console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Uncaught [Error: Photo(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]
at reportException (/Users/norfeldt/Abtion/Playground/react-kitchen-sink/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
at innerInvokeEventListeners (/Users/norfeldt/Abtion/Playground/react-kitchen-sink/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
at invokeEventListeners
...
The above error occurred in the <Photo> component:
in Photo (at Photo/index.test.js:32)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit <link> to learn more about error boundaries.
● has a test id
Photo(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
...
最佳答案
这似乎是 create-react-app
中的一个已知问题版本>3.4.1,运行时出现此bug react-scripts test
与旗帜 --watchAll=false
和 --coverage
同时。已在 @facebook/create-react-app#8689 中报告
后来通过更新 jest
修复了该错误。 CRA 中使用的版本到 PR 中的 >25 版本 @facebook/create-react-app#8362 .该修复程序包含在 CRA 的新主要版本 4.0.0 中。
因此,您应该升级您的 react-scripts
打包到版本 >=4.0.0 然后关注 this migration guide (查看是否有任何影响您的重大更改)然后问题应该得到解决。
在你的情况下,我已经下载了你的 repo 并完成了以下操作:
node_modules
文件夹。 react-scripts
通过执行此命令到 4.0.0 版 yarn add --exact react-scripts@4.0.0
(也可能是更高的 4.x 版本)。 yarn install
再次。 yarn test:coverage
它就像一个魅力:如果其他人正在阅读这篇文章并且由于某种原因升级到 4.0.0 版本不是一种选择,那么短期的简单解决方法是:
--watchAll=false
并像这样运行它:react-scripts test --env=jest-environment-jsdom-sixteen --coverage
react-scripts
到版本 3.4.0。 关于reactjs - Create-React-App:无法从 package.json 脚本触发代码覆盖率报告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66353093/