fix(pretty-format): Handle empty string children in React same as react-test-renderer (#14470)

Author: SimenB

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - `[jest-environment-jsdom]` [**BREAKING**] Upgrade JSDOM to v22 ([#13825](https://github.com/jestjs/jest/pull/13825))
 - `[@jest/test-sequencer, jest-core]` [**BREAKING**] Exposes `globalConfig` & `contexts` to `TestSequencer` ([#14535](https://github.com/jestjs/jest/pull/14535), & [#14543](https://github.com/jestjs/jest/pull/14543))
+- `[pretty-format]` [**BREAKING**] Do not render empty string children (`''`) in React plugin ([#14470](https://github.com/facebook/jest/pull/14470))
 
 ### Fixes
 

constraints.pro

@@ -19,10 +19,6 @@ gen_enforced_dependency(WorkspaceCwd, DependencyIdent, DependencyRange2, Depende
   DependencyType2 \= 'peerDependencies',
   % A list of exception to same version rule
   \+ member(DependencyIdent, [
-    % Allow enzyme example workspace use a older version react and react-dom, because enzyme don't support react 17
-    'react', 'react-dom', '@types/react',
-    % Only RN should be bumped to react 18
-    'react-test-renderer',
     % @types/node in the root need to stay on ~14.14.45
     '@types/node',
     % upgrading the entire repository is a breaking change

e2e/babel-plugin-jest-hoist/package.json

@@ -3,7 +3,7 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-typescript": "^7.0.0",
-    "react": "17.0.2"
+    "react": "18.2.0"
   },
   "jest": {
     "automock": true,

e2e/babel-plugin-jest-hoist/yarn.lock

@@ -1573,13 +1573,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "object-assign@npm:4.1.1"
-  checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
-  languageName: node
-  linkType: hard
-
 "path-parse@npm:^1.0.7":
   version: 1.0.7
   resolution: "path-parse@npm:1.0.7"
@@ -1594,13 +1587,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
   languageName: node
   linkType: hard
 
@@ -1694,7 +1686,7 @@ __metadata:
     "@babel/preset-env": ^7.0.0
     "@babel/preset-flow": ^7.0.0
     "@babel/preset-typescript": ^7.0.0
-    react: 17.0.2
+    react: 18.2.0
   languageName: unknown
   linkType: soft
 

e2e/transform/multiple-transformers/package.json

@@ -17,8 +17,8 @@
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "react": "17.0.2",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-test-renderer": "18.2.0"
   }
 }

e2e/transform/multiple-transformers/yarn.lock

@@ -1738,34 +1738,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.23.0
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.2.0
+  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0":
+"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.2.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"
   checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
   languageName: node
   linkType: hard
 
-"react-is@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react-is@npm:17.0.2"
-  checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
-  languageName: node
-  linkType: hard
-
-"react-shallow-renderer@npm:^16.13.1":
+"react-shallow-renderer@npm:^16.15.0":
   version: 16.15.0
   resolution: "react-shallow-renderer@npm:16.15.0"
   dependencies:
@@ -1777,27 +1769,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-test-renderer@npm:17.0.2":
-  version: 17.0.2
-  resolution: "react-test-renderer@npm:17.0.2"
+"react-test-renderer@npm:18.2.0":
+  version: 18.2.0
+  resolution: "react-test-renderer@npm:18.2.0"
   dependencies:
-    object-assign: ^4.1.1
-    react-is: ^17.0.2
-    react-shallow-renderer: ^16.13.1
-    scheduler: ^0.20.2
+    react-is: ^18.2.0
+    react-shallow-renderer: ^16.15.0
+    scheduler: ^0.23.0
   peerDependencies:
-    react: 17.0.2
-  checksum: e6b5c6ed2a0bde2c34f1ab9523ff9bc4c141a271daf730d6b852374e83acc0155d58ab71a318251e953ebfa65b8bebb9c5dce3eba1ccfcbef7cc4e1e8261c401
+    react: ^18.2.0
+  checksum: 6b6980ced93fa2b72662d5e4ab3b4896833586940047ce52ca9aca801e5432adf05fcbe28289b0af3ce6a2a7c590974e25dcc8aa43d0de658bfe8bbcd686f958
   languageName: node
   linkType: hard
 
-"react@npm:17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
   languageName: node
   linkType: hard
 
@@ -1891,19 +1881,18 @@ __metadata:
     "@babel/core": ^7.0.0
     "@babel/preset-env": ^7.0.0
     "@babel/preset-react": ^7.0.0
-    react: 17.0.2
-    react-dom: ^17.0.1
-    react-test-renderer: 17.0.2
+    react: 18.2.0
+    react-dom: 18.2.0
+    react-test-renderer: 18.2.0
   languageName: unknown
   linkType: soft
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
+"scheduler@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "scheduler@npm:0.23.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
+  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
   languageName: node
   linkType: hard
 

examples/react-testing-library/package.json

@@ -4,7 +4,7 @@
   "name": "example-react-testing-library",
   "dependencies": {
     "react": "18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",

examples/react/package.json

@@ -4,7 +4,7 @@
   "name": "example-react",
   "dependencies": {
     "react": "18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",

examples/snapshot/package.json

@@ -3,15 +3,15 @@
   "version": "0.0.0",
   "name": "example-snapshot",
   "dependencies": {
-    "react": "17.0.2"
+    "react": "18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.12.1",
     "babel-jest": "workspace:^",
     "jest": "workspace:^",
-    "react-test-renderer": "17.0.2"
+    "react-test-renderer": "18.2.0"
   },
   "scripts": {
     "test": "jest"

examples/typescript/package.json

@@ -4,7 +4,7 @@
   "name": "example-typescript",
   "dependencies": {
     "react": "18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "^5.0.4"
   },
   "devDependencies": {

packages/pretty-format/package.json

@@ -24,14 +24,14 @@
     "react-is": "^18.0.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.3",
+    "@types/react": "^18.2.0",
     "@types/react-is": "^18.0.0",
-    "@types/react-test-renderer": "17.0.2",
+    "@types/react-test-renderer": "^18.0.1",
     "immutable": "^4.0.0",
     "jest-util": "workspace:^",
-    "react": "17.0.2",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-test-renderer": "18.2.0"
   },
   "engines": {
     "node": "^16.10.0 || ^18.12.0 || >=20.0.0"

packages/pretty-format/src/__tests__/react.test.tsx

@@ -48,10 +48,7 @@ test('supports a single element with non-empty string child', () => {
 });
 
 test('supports a single element with empty string child', () => {
-  assertPrintedJSX(
-    React.createElement('Mouse', null, ''),
-    '<Mouse>\n  \n</Mouse>',
-  );
+  assertPrintedJSX(React.createElement('Mouse', null, ''), '<Mouse />');
 });
 
 test('supports a single element with non-zero number child', () => {

packages/pretty-format/src/plugins/ReactElement.ts

@@ -21,7 +21,7 @@ const getChildren = (arg: unknown, children: Array<unknown> = []) => {
     for (const item of arg) {
       getChildren(item, children);
     }
-  } else if (arg != null && arg !== false) {
+  } else if (arg != null && arg !== false && arg !== '') {
     children.push(arg);
   }
   return children;

website/package.json

@@ -39,8 +39,8 @@
     "@docusaurus/remark-plugin-npm2yarn": "3.0.0-beta.0",
     "clsx": "^2.0.0",
     "docusaurus-remark-plugin-tab-blocks": "^2.0.0-beta",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-github-btn": "^1.3.0",
     "react-lite-youtube-embed": "^2.2.2",
     "react-markdown": "^8.0.0"
@@ -50,7 +50,7 @@
     "@crowdin/cli": "^3.5.2",
     "@docusaurus/module-type-aliases": "3.0.0-beta.0",
     "@docusaurus/tsconfig": "3.0.0-beta.0",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.0",
     "graphql": "^16.3.0",
     "graphql-request": "^6.0.0",
     "js-yaml": "^4.1.0",