[Bug]: Snapshot tests failing for React 19

[remarkablemark]

Version

29.7.0

Steps to reproduce

Clone repo:

git clone https://github.com/remarkablemark/html-react-parser.git
cd html-react-parser
git checkout build/package

Install deps:

npm i

Run tests:

npm test

See remarkablemark/html-react-parser#1629 (comment)

Expected behavior

Snapshot tests without issues

Actual behavior

Snapshot tests failing for React 19:

Error: expect(received).toMatchSnapshot()

Snapshot name: `domToReact converts single DOM node to React 1`

- Snapshot  -  3
+ Received  + 10

- <p>
-   foo
- </p>
+ {
+   "$$typeof": Symbol(react.transitional.element),
+   "_owner": null,
+   "_store": {},
+   "key": null,
+   "props": {
+     "children": "foo",
+   },
+   "type": "p",
+ }

    at Object.<anonymous> (__tests__/dom-to-react.test.tsx:24:26)

Additional context

No response

Environment

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
    pnpm: 9.14.4 - ~/Library/pnpm/pnpm
  npmPackages:
    jest: 29.7.0 => 29.7.0

[Filipoliko]

As a hotfix, you can add overrides to your package.json

{
  "overrides": {
    "pretty-format": {
      "react-is": "19.0.0"
    }
  }
}

The issue is related to react changing the Symbol.for('react.element') to Symbol.for('react.transitional.element') - see facebook/react@3b551c8

This is a bit tricky for Jest as updating the react-is library to v19 will break react <19 and keeping the current version breaks the new react. I am having very similar issue in my library for shallow rendering react components and my current solution is adding react-is as a peer dependency and having users specify the react-is version as a dependency in their projects, but it is not very practical especially in a library like Jest.

Maybe updating react-is to v19 (in pretty-format) and changing this condition with

typeof val === 'object' &&
val != null &&
(
  ReactIs.isElement(val) ||
  val.$$typeof === Symbol.for('react.element') // Compatibility with react <19
)

will solve the issue? But I am not sure if there are more use-cases, that can break.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[remarkablemark]

Leaving a comment to remove stale label

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[remarkablemark]

Leaving a comment to remove stale label

[myklosbotond]

I had another related issue when the component to be serialized received a React Element as a prop. It tried to serialize it with printComplexValue, ending in RangeError: Invalid string length.

@Filipoliko's comment did the trick.

For other yarn users, the syntax is

{
    "resolutions": {
        "**/pretty-format/react-is": "19.0.0"
    }
}