When upgrading to React 19 and NextJS 15, jest snapshots that had header changes via `next/head` break

Question

In our tests, we had several snapshots that included content wrapped in next/head. We had previously followed the below pattern for the mock, which allowed us to see all the header tags like meta, link, title, etc in the snapshot for the component being tested.

jest.mock('next/head', () => {
 return {
 __esModule: true,
 default: ({ children }: { children: Array<ReactElement> }) => {
 return children
 }
 }
})

However, after upgrading, we see these tests fail and all the header-specific fields like meta, link, etc are all absent from the component fragment. We were testing the snapshot like the below.

const { container } = render()
expect(container).toMatchSnapshot()

No matter how we update the mock, we're unable to get the header tags to appear in the component fragment snapshot.

Answer 1

It turns out that in React 19, header components are automatically hoisted to the header itself. Accordingly, we had to update the the tests to do a diff of the header as well like the below.

const { container } = render()
expect(container).toMatchSnapshot()
expect(document.head).toMatchSnapshot('headers')