testing-library/react-testing-library

Render doesn't render the same result in react 19

Closed this issue · 2 comments

michielmetcake commented
  • @testing-library/react version: 16.3.0
  • Testing Framework and version:
    "jest": "^30.0.5",
  • DOM Environment:
    "jest-environment-jsdom": "^30.0.5",

Relevant code or config:

import { render } from "@testing-library/react";

describe( () => {
  it(() => {
    const {container} = render(<link rel="preconnect" key="bla" href='/bla' />);

    expect(container).toMatchSnapshot()
  });
});

What you did:

We want to update to react 19. But the tests made with testing-library are failing.

What happened:

When running the test from above this is the snapshot we receive:

    - Snapshot  - 6
    + Received  + 1

    - <div>
    -   <link
    -     href="/bla"
    -     rel="preconnect"
    -   />
    - </div>
    + <div />

Reproduction:

https://codesandbox.io/p/devbox/zf2xft?file=%2Fpackage.json%3A14%2C3-15%2C26

Change the version of react to:

"react": "19.1.0",
"react-dom": "19.1.0"

Problem description:

  • inconsistent testing response between react versions
agnieszkaac commented

I am having similar problem. After upgrading react to v19 tests do not like the render method as well.

"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.8.0",
...
"jest": "^30.1.3",

...
"react": "^19.1.1",
"react-dom": "^19.1.1",
Image

Is anyone currently working on that or maybe there is another solution to fix this?

eps1lon commented

React hoists these elements into the <head> in React 19. So you have to query document.head instead. This is caused by React Testing Library. Just how React 19 works.