fix(pretty-format): support react 19 (#6909)

Author: hi-ogawa

packages/pretty-format/package.json

@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@types/react-is": "^18.3.0",
-    "react-is": "^18.3.1"
+    "react-is": "^18.3.1",
+    "react-is-19": "npm:react-is@19.0.0-rc-b01722d5-20241114"
   }
 }

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

@@ -6,14 +6,38 @@
  */
 
 import type { Config, NewPlugin, Printer, Refs } from '../types'
-import * as ReactIs from 'react-is'
+import * as ReactIs18 from 'react-is'
+// @ts-expect-error no type
+import * as ReactIs19 from 'react-is-19'
 import {
   printChildren,
   printElement,
   printElementAsLeaf,
   printProps,
 } from './lib/markup'
 
+const reactIsMethods = [
+  'isAsyncMode',
+  'isConcurrentMode',
+  'isContextConsumer',
+  'isContextProvider',
+  'isElement',
+  'isForwardRef',
+  'isFragment',
+  'isLazy',
+  'isMemo',
+  'isPortal',
+  'isProfiler',
+  'isStrictMode',
+  'isSuspense',
+  'isSuspenseList',
+  'isValidElementType',
+] as const
+
+const ReactIs: typeof ReactIs18 = Object.fromEntries(
+  reactIsMethods.map(m => [m, (v: any) => (ReactIs18 as any)[m](v) || ReactIs19[m](v)]),
+) as any
+
 // Given element.props.children, or subtree during recursive traversal,
 // return flattened array of children.
 function getChildren(arg: unknown, children: Array<unknown> = []) {

pnpm-lock.yaml

@@ -26,6 +26,8 @@
     "debug": "^4.3.4",
     "immutable": "5.0.0-beta.5",
     "memfs": "^4.8.2",
+    "react": "^18.3.1",
+    "react-19": "npm:react@19.0.0-rc-b01722d5-20241114",
     "sweetalert2": "^11.6.16",
     "tinyrainbow": "^1.2.0",
     "tinyspy": "^1.0.2",

test/core/package.json

@@ -0,0 +1,12 @@
+// @jsxRuntime automatic
+// @jsxImportSource react-19
+
+import { expect, test } from 'vitest'
+
+test('react 19', () => {
+  expect(<div>hello</div>).toMatchInlineSnapshot(`
+    <div>
+      hello
+    </div>
+  `)
+})

test/core/test/snapshot-react-19.test.jsx

@@ -0,0 +1,12 @@
+// @jsxRuntime automatic
+// @jsxImportSource react
+
+import { expect, test } from 'vitest'
+
+test('react 18', () => {
+  expect(<div>hello</div>).toMatchInlineSnapshot(`
+    <div>
+      hello
+    </div>
+  `)
+})