testing-library/react-testing-library

React19 - Document Metadata feature

JavierScars opened this issue · 4 comments

JavierScars commented
  • @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 commented

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

  • 👀1
JavierScars commented

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 commented

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.

  • 🚀1
JavierScars commented

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

That worked! Thanks!! 🙌