From bd29bcc7406d570353bacacd09d7c510e97f6148 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Mon, 18 Nov 2024 23:08:18 +0900 Subject: [PATCH] fix(pretty-format): support react 19 (#6909) --- packages/pretty-format/package.json | 3 +- .../pretty-format/src/plugins/ReactElement.ts | 26 ++++++++- pnpm-lock.yaml | 58 ++++++++++++++++--- test/core/package.json | 2 + test/core/test/snapshot-react-19.test.jsx | 12 ++++ test/core/test/snapshot-react.test.jsx | 12 ++++ 6 files changed, 103 insertions(+), 10 deletions(-) create mode 100644 test/core/test/snapshot-react-19.test.jsx create mode 100644 test/core/test/snapshot-react.test.jsx diff --git a/packages/pretty-format/package.json b/packages/pretty-format/package.json index 09a962a8e855..87bd60e67c65 100644 --- a/packages/pretty-format/package.json +++ b/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" } } diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts index 17f9eaf1c4f4..4db089fdb8eb 100644 --- a/packages/pretty-format/src/plugins/ReactElement.ts +++ b/packages/pretty-format/src/plugins/ReactElement.ts @@ -6,7 +6,9 @@ */ 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, @@ -14,6 +16,28 @@ import { 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 = []) { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 15ee5120ba50..ca84e3147964 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -627,6 +627,9 @@ importers: react-is: specifier: ^18.3.1 version: 18.3.1 + react-is-19: + specifier: npm:react-is@19.0.0-rc-b01722d5-20241114 + version: react-is@19.0.0-rc-b01722d5-20241114 packages/runner: dependencies: @@ -1183,6 +1186,12 @@ importers: memfs: specifier: ^4.8.2 version: 4.8.2 + react: + specifier: ^18.3.1 + version: 18.3.1 + react-19: + specifier: npm:react@19.0.0-rc-b01722d5-20241114 + version: react@19.0.0-rc-b01722d5-20241114 sweetalert2: specifier: ^11.6.16 version: 11.6.16 @@ -1224,7 +1233,7 @@ importers: version: 3.0.3 '@vitejs/plugin-vue': specifier: latest - version: 5.1.5(vite@5.4.0(@types/node@22.9.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + version: 5.2.0(vite@5.4.0(@types/node@22.9.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@vitest/browser': specifier: workspace:* version: link:../../packages/browser @@ -1239,7 +1248,7 @@ importers: version: 2.4.6 happy-dom: specifier: latest - version: 15.11.4 + version: 15.11.6 istanbul-lib-coverage: specifier: ^3.2.0 version: 3.2.0 @@ -1266,7 +1275,7 @@ importers: version: 3.5.12(typescript@5.6.3) webdriverio: specifier: latest - version: 9.2.12 + version: 9.2.14 test/dts-fixture: devDependencies: @@ -1366,7 +1375,7 @@ importers: version: 9.3.3 happy-dom: specifier: latest - version: 15.11.4 + version: 15.11.6 vitest: specifier: workspace:* version: link:../../packages/vitest @@ -1399,7 +1408,7 @@ importers: version: link:../../packages/vitest webdriverio: specifier: latest - version: 9.2.12 + version: 9.2.14 test/workspaces: devDependencies: @@ -3983,6 +3992,13 @@ packages: vite: ^5.4.0 vue: ^3.2.25 + '@vitejs/plugin-vue@5.2.0': + resolution: {integrity: sha512-7n7KdUEtx/7Yl7I/WVAMZ1bEb0eVvXF3ummWTeLcs/9gvo9pJhuLdouSXGjdZ/MKD1acf1I272+X0RMua4/R3g==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + vite: ^5.4.0 + vue: ^3.2.25 + '@vitest/eslint-plugin@1.1.7': resolution: {integrity: sha512-pTWGW3y6lH2ukCuuffpan6kFxG6nIuoesbhMiQxskyQMRcCN5t9SXsKrNHvEw3p8wcCsgJoRqFZVkOTn6TjclA==} peerDependencies: @@ -6169,6 +6185,10 @@ packages: resolution: {integrity: sha512-AU6tzh3ADd28vSmXahgLsGyGGihXPGeKH0owDn9lhHolB6vIwEhag//T+TBzDoAcHhmVEwlxwSgtW1KZep+1MA==} engines: {node: '>=18.0.0'} + happy-dom@15.11.6: + resolution: {integrity: sha512-elX7iUTu+5+3b2+NGQc0L3eWyq9jKhuJJ4GpOMxxT/c2pg9O3L5H3ty2VECX0XXZgRmmRqXyOK8brA2hDI6LsQ==} + engines: {node: '>=18.0.0'} + has-bigints@1.0.2: resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==} @@ -7864,6 +7884,9 @@ packages: react-is@18.3.1: resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} + react-is@19.0.0-rc-b01722d5-20241114: + resolution: {integrity: sha512-nR4blVGWugab7X2wN/FXLNKw1HWVK8lO9+rv0ip2xN5j6RNvXOV1PKtWOm2TuDzq52Nc6ASyno8FFy088ejsfA==} + react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} @@ -7876,6 +7899,10 @@ packages: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} + react@19.0.0-rc-b01722d5-20241114: + resolution: {integrity: sha512-VT5vig/1unX2lH2RiEuQoKJkn/wnuQw7xwNndsVeVx7TQPQu+6GUjhBomhyZIW3M1bDgPGG5wEBgjNoIXYkeEQ==} + engines: {node: '>=0.10.0'} + read-pkg-up@7.0.1: resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==} engines: {node: '>=8'} @@ -9355,8 +9382,8 @@ packages: devtools: optional: true - webdriverio@9.2.12: - resolution: {integrity: sha512-XtptP5mrubvr6s1GrtPk1DqdfcMvnaYqZCTfWT0EIebFFnQSz9sc0c9qn553zoNB6Xfe6+kyTRh9Tyj7AFIrEg==} + webdriverio@9.2.14: + resolution: {integrity: sha512-85yEbwN3MwdrGzKZoGkLUf1J5cpfnc7knL4u/Y6XWd0gGwYjv60I5ZPsgSnXzNXAkq2kmtkammf1AM3ihqFM3A==} engines: {node: '>=18.20.0'} peerDependencies: puppeteer-core: ^22.3.0 @@ -12440,6 +12467,11 @@ snapshots: vite: 5.4.0(@types/node@22.9.0)(terser@5.36.0) vue: 3.5.12(typescript@5.6.3) + '@vitejs/plugin-vue@5.2.0(vite@5.4.0(@types/node@22.9.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': + dependencies: + vite: 5.4.0(@types/node@22.9.0)(terser@5.36.0) + vue: 3.5.12(typescript@5.6.3) + '@vitest/eslint-plugin@1.1.7(@typescript-eslint/utils@8.10.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3)(vitest@packages+vitest)': dependencies: '@typescript-eslint/utils': 8.10.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3) @@ -15181,6 +15213,12 @@ snapshots: webidl-conversions: 7.0.0 whatwg-mimetype: 3.0.0 + happy-dom@15.11.6: + dependencies: + entities: 4.5.0 + webidl-conversions: 7.0.0 + whatwg-mimetype: 3.0.0 + has-bigints@1.0.2: {} has-flag@3.0.0: {} @@ -17114,6 +17152,8 @@ snapshots: react-is@18.3.1: {} + react-is@19.0.0-rc-b01722d5-20241114: {} + react-refresh@0.14.0: {} react@18.2.0: @@ -17124,6 +17164,8 @@ snapshots: dependencies: loose-envify: 1.4.0 + react@19.0.0-rc-b01722d5-20241114: {} + read-pkg-up@7.0.1: dependencies: find-up: 4.1.0 @@ -18889,7 +18931,7 @@ snapshots: - supports-color - utf-8-validate - webdriverio@9.2.12: + webdriverio@9.2.14: dependencies: '@types/node': 20.14.15 '@types/sinonjs__fake-timers': 8.1.5(patch_hash=ggdsr7nrdrzokhhihsihc2hdja) diff --git a/test/core/package.json b/test/core/package.json index 61d675012944..8a058771180d 100644 --- a/test/core/package.json +++ b/test/core/package.json @@ -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", diff --git a/test/core/test/snapshot-react-19.test.jsx b/test/core/test/snapshot-react-19.test.jsx new file mode 100644 index 000000000000..41d669c81983 --- /dev/null +++ b/test/core/test/snapshot-react-19.test.jsx @@ -0,0 +1,12 @@ +// @jsxRuntime automatic +// @jsxImportSource react-19 + +import { expect, test } from 'vitest' + +test('react 19', () => { + expect(
hello
).toMatchInlineSnapshot(` +
+ hello +
+ `) +}) diff --git a/test/core/test/snapshot-react.test.jsx b/test/core/test/snapshot-react.test.jsx new file mode 100644 index 000000000000..20c19d8cfdf5 --- /dev/null +++ b/test/core/test/snapshot-react.test.jsx @@ -0,0 +1,12 @@ +// @jsxRuntime automatic +// @jsxImportSource react + +import { expect, test } from 'vitest' + +test('react 18', () => { + expect(
hello
).toMatchInlineSnapshot(` +
+ hello +
+ `) +})