Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Snapshot tests failing for React 19 #15402

Open
remarkablemark opened this issue Dec 6, 2024 · 1 comment · Fixed by contentful/rich-text#756
Open

[Bug]: Snapshot tests failing for React 19 #15402

remarkablemark opened this issue Dec 6, 2024 · 1 comment · Fixed by contentful/rich-text#756

Comments

@remarkablemark
Copy link
Contributor

remarkablemark commented Dec 6, 2024

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)

Image

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
Copy link

Filipoliko commented Jan 7, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants