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.

Sign up for GitHub

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

Jump to bottom

React19 - Document Metadata feature #1379

Closed
JavierScars opened this issue Jan 29, 2025 · 4 comments
Closed

React19 - Document Metadata feature #1379

JavierScars opened this issue Jan 29, 2025 · 4 comments

Comments

@JavierScars
Copy link

  • @testing-library/react version: 16.2.0
  • Testing Framework and version: Jest 29.7.0
  • DOM Environment: 29.7.0
  • Next Version: 15.1.4

Relevant code or config:

    import Head from 'next/head';
    ....
    ....
    <Head>
      <meta name="twitter:description" content={mySiteName} />
      <link rel="icon" href={faviconUrl} type="image/png" sizes="64x64" data-testid="favicon" />
    </Head>

What you did:

I updated React to v19

What happened:

After updating to React19 I found out that my tests related to stuff in the Head tag were all failing. When I did screen.debug(), I found out that no meta or link tags were being rendered in the <div data-role="head"> Next tag (as it does with React18). This is probably related to how react handles meta tags on V19 (https://react.dev/blog/2024/12/05/react-19#support-for-metadata-tags)

Problem description:

We cannot test anything inside the head tag anymore.

P.S: I don't know if this is the right place to ask for help about this, let me know if you think i should actually file an issue in the react or next project instead :c
@eps1lon
Copy link
Member

eps1lon commented Jan 31, 2025

You should query document.head instead. This is intended behavior by React and you need to update your tests.

@JavierScars
Copy link
Author

You should query document.head instead. This is intended behavior by React and you need to update your tests.

Could you be a little more explicit?
I tried doing console.log(JSON.stringify(document.head)); in my test and I'm getting an empty object.

BTW i think I found a workaround, maybe I can use the Next generateMetadata helper and manually test the exported function.

@eps1lon
Copy link
Member

eps1lon commented Jan 31, 2025

I tried doing console.log(JSON.stringify(document.head)); in my test and I'm getting an empty object.

I don't think stringify works on HTML elements. I meant that you can just document.querySelector('meta') to find all the meta tags.

@JavierScars
Copy link
Author

you can just document.querySelector('meta') to find all the meta tags.

That worked! Thanks!! 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@eps1lon @JavierScars