How to test metadata using jest and react library test #11060

najandz · 2020-03-13T20:23:38Z

najandz
Mar 13, 2020

Hi,

We are using Next-SEO for metadata and structured data in our project, and I was wondering if anyone could help me to write a unit test to verify those elements.

Cheers,

joshvillahermosa · 2020-06-17T01:20:07Z

joshvillahermosa
Jun 17, 2020

I don't think React Test Library render function will render items in <Head>...</Head>. I did a quick example with Jest/React Test Lib:

  const renderComponent = ({ pageConfig, version }: Props) => {
   // Component will take the version and create a meta tag with it
    return render(<Index pageConfig={pageConfig} version={version} />)
  }

...

  it('should have a proper title', async () => {
    renderComponent({ pageConfig, version })
    await waitFor(() => {
      expect(document.querySelector('head')).toMatchSnapshot()
      // expect(document.title).toBe(pageConfig.title)
    })
  })

The following snapshot have me

exports[`Home Page should have a proper title 1`] = `<head />`;

Running debug also just prints what is in document.body so I do not think they will render head elements. If some one does find a way, I would love to know. In the mean time I will probably use Cypress to test title and meta elements.

0 replies

Ethaan · 2020-06-19T18:08:07Z

Ethaan
Jun 19, 2020

@joshvillahermosa did you try with

await act(async () => {
  const { debug } = render(<Seo />, {
    container: document.head
  });
  debug();
});

i got a simple Component that render meta tags depending on the pathname that looks like this.

import React, { useState, useEffect } from 'react';

// next
import NextSeo from 'next-seo';

// hooks
import { useLocation } from 'react-use';

// helpers
import { getSeoConfig } from 'src/helpers/seo';

// constants
import { BASE_SEO } from 'src/constants';

const Seo: React.FC = () => {
  const [seo, setSeo] = useState(BASE_SEO);

  const state = useLocation();

  useEffect(() => {
    async function fetchSeo() {
      try {
        const data = await getSeoConfig(state.pathname);
        setSeo(data);
      } catch (error) {
        // TODO Sentry?
      }
    };

    fetchSeo();
  }, [getSeoConfig]);

  return (
    <>
      <title>Hello</title>
      <NextSeo
        config={seo}
      />
      <meta property="og:title" content="Test" />
    </>
  )
};

export default Seo;

and this is the debug output.

 PASS  src/components/Seo.spec.tsx
  <Seo />
    ✓ show correct seo config (42 ms)

  console.log
    <head>
      <title>
        Hello
      </title>
      <meta
        content="Sapien"
        property="og:title"
      />
    </head>

So it does render <head /> stuff but NextSeo /> its not rendering anything

0 replies

joshvillahermosa · 2020-06-20T13:41:14Z

joshvillahermosa
Jun 20, 2020

Hmm, I haven't tried that yet but I'll give it a try. Thanks!

…

On Fri, Jun 19, 2020, 2:08 PM Ethan ***@***.***> wrote: @joshvillahermosa <https://github.com/joshvillahermosa> did you try with await act(async () => { const { debug } = render(<Seo />, { container: document.head }); debug(); }); i got a simple Component that render meta tags depending on the pathname that looks like this. import React, { useState, useEffect } from 'react'; // next import NextSeo from 'next-seo'; // hooks import { useLocation } from 'react-use'; // helpers import { getSeoConfig } from 'src/helpers/seo'; // constants import { BASE_SEO } from 'src/constants'; const Seo: React.FC = () => { const [seo, setSeo] = useState(BASE_SEO); const state = useLocation(); useEffect(() => { async function fetchSeo() { try { const data = await getSeoConfig(state.pathname); setSeo(data); } catch (error) { // TODO Sentry? } }; fetchSeo(); }, [getSeoConfig]); return ( <> <title>Hello</title> <NextSeo config={seo} /> <meta property="og:title" content="Test" /> </> ) }; export default Seo; and this is the debug output. PASS src/components/Seo.spec.tsx <Seo /> ✓ show correct seo config (42 ms) console.log <head> <title> Hello </title> <meta content="Sapien" property="og:title" /> </head> So it does render <head /> stuff but NextSeo /> its not rendering anything — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#11060 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAZXPZHFSJ6ONR4CV2UEHITRXOSRNANCNFSM4LHJV47A> .

0 replies

Ethaan · 2020-07-03T17:11:03Z

Ethaan
Jul 3, 2020

I get to this test this morning and found a solution.

you guys need to mock next/head for example.

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

and then simply do, for example.

const title = 'From Next Seo';
render(<NextSeo config={{ title }} />, {
  container: document.head,
});

expect(document.title).toBe(title);

you can check how this is correctly render into the by doing

const { debug } = render(<NextSeo config={{ title }} />, {
  container: document.head,
});
debug()

3 replies

javidjamae Sep 11, 2020

This works in general, but not when you have <script> tags.

When I pass a <script> into the <Head> I get something like this and my test hangs:

(node:66285) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLScriptElement'
    |     property '__reactInternalInstance$mdqi9rn7p1e' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at stringify (<anonymous>)
    at writeChannelMessage (internal/child_process/serialization.js:117:20)
    at process.target._send (internal/child_process.js:804:17)
    at process.target.send (internal/child_process.js:702:19)

tremby Oct 27, 2020

Another issue is that the mock implementation here does not do any deduplication like next/head does. See https://github.com/vercel/next.js/blob/canary/packages/next/next-server/lib/head.tsx#L57

kevin-cho May 24, 2022

The new head container wasn't automatically appended to body (https://testing-library.com/docs/react-testing-library/api/#container) so I just added:

render(<Component />, {
  container: document.body.appendChild(document.createElement('head')),
})

Ethaan · 2020-09-11T02:20:36Z

Ethaan
Sep 11, 2020

@javidjamae can you open a code sandbox with this? or an example of how the <Header> looks? i got mine working with an script tag, btw how do you feel about using that <script> tag on _document.ts?

0 replies

Fi1osof · 2020-11-09T10:52:14Z

Fi1osof
Nov 9, 2020

My solution:

https://github.com/prisma-cms/nextjs/blob/2dfd3b2f7766c5967b6a5271ea0503e02bf2b395/src/tests/utils.tsx#L15-L33

jest.mock('next/head', () => {
  const ReactDOMServer = require('react-dom/server')
  return {
    __esModule: true,
    default: ({
      children,
    }: {
      children: Array<React.ReactElement> | React.ReactElement | null
    }) => {
      if (children) {
        global.document.head.insertAdjacentHTML(
          'afterbegin',
          ReactDOMServer.renderToString(children) || ''
        )
      }
      return null
    },
  }
})

Can be added globaly for all tests

Test:
https://github.com/prisma-cms/nextjs/blob/2dfd3b2f7766c5967b6a5271ea0503e02bf2b395/src/pages/_Error/404/__tests__/index.test.tsx#L16-L37

    const tree = baseRender(<Component />)

    const head = tree.baseElement.parentElement?.firstChild as HTMLHeadElement

    expect(head).toMatchSnapshot()
    expect(tree.baseElement.parentNode).toMatchSnapshot()

    expect(
      head
        .querySelector('meta[name=robots]')
        ?.attributes.getNamedItem('content')?.value
    ).toBe('noindex,follow')

    expect(
      head
        .querySelector('meta[name=googlebot]')
        ?.attributes.getNamedItem('content')?.value
    ).toBe('noindex,follow')

Snapshot:

exports[`404 Error page Render 404 Error page 1`] = `
<head>
  <title
    data-reactroot=""
  >
    Page Not Found
  </title>
  <meta
    content="noindex,follow"
    data-reactroot=""
    name="robots"
  />
  <meta
    content="noindex,follow"
    data-reactroot=""
    name="googlebot"
  />
  <style
    data-styled="active"
    data-styled-version="5.2.1"
  />
</head>
`;

exports[`404 Error page Render 404 Error page 2`] = `
<html>
  <head>
    <title
      data-reactroot=""
    >
      Page Not Found
    </title>
    <meta
      content="noindex,follow"
      data-reactroot=""
      name="robots"
    />
    <meta
      content="noindex,follow"
      data-reactroot=""
      name="googlebot"
    />
    <style
      data-styled="active"
      data-styled-version="5.2.1"
    />
  </head>
  <body>
    <div>
      <h2>
        404 - Page Not Found
      </h2>
    </div>
  </body>
</html>
`;

4 replies

tremby Nov 9, 2020

I didn't try your code but I suspect from a read through that it would suffer from the same bug as my own similar mock. Mine does not perform any deduplication of metadata set within it, so for example it will render two og:title fields if two are given. next/head deduplicates these. In effect this means tests might have false positives/negatives in certain cases.

Fi1osof Nov 9, 2020

@tremby yes, you right. Thanks for the tip!

I create new solution: use HeadManagerContext from next-js.
https://github.com/prisma-cms/nextjs/blob/41c6a92121619a856ca120252cb247db3a6dfcd5/src/tests/utils.tsx#L27-L49

const HeadProvider: React.FC = ({ children }) => {
  let head: JSX.Element[]

  useEffect(() => {
    global.document.head.insertAdjacentHTML(
      'afterbegin',
      ReactDOMServer.renderToString(<>{head}</>) || ''
    )
  })

  return (
    <HeadManagerContext.Provider
      value={{
        updateHead: (state) => {
          head = state
        },
        mountedInstances: new Set(),
      }}
    >
      {children}
    </HeadManagerContext.Provider>
  )
}

Now you can do even like this

    const tree = render(
      <Component>
        <NextSeo noindex={false} title="Page Not Found 3" description="" />
        <NextSeo noindex={false} title="Page Not Found 4" description="" />
        <NextSeo noindex={false} title="Page Not Found 5" description="" />
        
        <Head>
          <script
            dangerouslySetInnerHTML={{
              __html: `alert("test)`,
            }}
          />
        </Head>
      </Component>
    )

    const head = tree.baseElement.parentElement?.firstChild as HTMLHeadElement

    expect(head).toMatchSnapshot()

Base Component have tags too.

Snap:

exports[`404 Error page Render 404 Error page 1`] = `
<head>
  <meta
    content="width=device-width"
    data-reactroot=""
    name="viewport"
  />
  <meta
    charset="utf-8"
    data-reactroot=""
  />
  <title
    data-reactroot=""
  >
    Page Not Found 5
  </title>
  <meta
    content="index,follow"
    data-reactroot=""
    name="robots"
  />
  <meta
    content="index,follow"
    data-reactroot=""
    name="googlebot"
  />
  <script
    data-reactroot=""
  >
    alert("test)
  </script>
  <script
    data-reactroot=""
  >
    alert("test)
  </script>
  <style
    data-styled="active"
    data-styled-version="5.2.1"
  />
</head>
`;

Test: https://github.com/prisma-cms/nextjs/blob/41c6a92121619a856ca120252cb247db3a6dfcd5/src/pages/_Error/404/__tests__/index.test.tsx

tremby Nov 12, 2020

I gave this a try and it seems to be a move in the right direction.

It's a shame we have to copy some of NextJS's code, but it's pretty short at least.

I think you missed saying that you need to wrap your tests in this component. I'm doing this:

import { render as baseRender } from "../test/test-utils";
function render(jsx: React.ReactElement): ReturnType<typeof baseRender> {
  return baseRender(jsx, { wrapper: HeadProvider });
}

However, I was having trouble figuring out how to clear the context between tests.

Say I have a few tests, each of which sets <meta key="mymeta" property="mymeta" content="mycontent" />. After the third test I was seeing three of these elements in the <head>. The cleanup function didn't seem to be doing its job here.

The solution was to totally empty out the <head> after each test. That was as simple as:

afterEach(() => {
  while (document.head.lastChild) document.head.removeChild(document.head.lastChild);
});

taktran Jan 5, 2021

That's a great solution @Fi1osof - thanks!

I've also extended your custom render function to add some convenience methods, to make testing <head> elements easier

// test-utils.js
import React from 'react'
import { render as baseRender } from '@testing-library/react'

jest.mock('next/head', () => {
  // ...
})

// Some definition of `AppWrapper`

const appRender = (ui, options) => {
  const app = baseRender(ui, { wrapper: AppWrapper, ...options })

  const { baseElement } = app
  const head = baseElement.parentElement.firstChild

  /**
   * Query <head> by a selector
   *
   * @usage
   *    const { getByHeadSelector } = render(<Component />)
   *    expect(getByHeadSelector('title').innerHTML).toContain(
   *     'Page title'
   *    )
   */
  const getByHeadSelector = selector => {
    return head.querySelector(selector)
  }
  app.getByHeadSelector = getByHeadSelector

  /**
   * Query <head> content attribute by a selector
   *
   * ie, `content_here` within <meta name="some_key" content="content_here" />
   *
   * @usage
   *    const { getContentByHeadSelector } = render(<Component />)
   *    expect(getContentByHeadSelector('meta[name=description]')).toBe(
   *     'Page description'
   *    )
   */
  const getContentByHeadSelector = selector => {
    const { attributes } = getByHeadSelector(selector) || {}
    if (!attributes) {
      return null
    }

    const content = attributes.getNamedItem('content')
    return content && content.value
  }
  app.getContentByHeadSelector = getContentByHeadSelector

  return app
}

// re-export everything
export * from '@testing-library/react'

export {
  /**
   * Base renderer from @testing-library/react
   */
  baseRender,
  /**
   * Override render method from @testing-library/react
   */
  appRender as render,
}

Fi1osof · 2020-11-12T08:00:08Z

Fi1osof
Nov 12, 2020

It's a shame we have to copy some of NextJS's code, but it's pretty short at least.
This looks like expected.
When next-js App works, they have own lifecycle with rendering _App, _Document and page, end one move renderer above this.
When we test own components, they not in next's lifecycle, and we need to add contexts and other.

next/head do not render headers immedialy. They collect all tags via context and render on App complete.

https://github.com/vercel/next.js/blob/canary/packages/next/next-server/lib/head.tsx#L162-L174

2 replies

tremby Nov 12, 2020

I know this. What I meant is that it'd be nice if Next exported that HeadProvider as part of some test utilities so we didn't need to duplicate the code.

Fi1osof Nov 12, 2020

I think next-js have to create something like https://github.com/styled-components/jest-styled-components

Hyokune · 2020-11-22T20:16:06Z

Hyokune
Nov 22, 2020

Has anyone figured out a solution for this yet?

2 replies

tremby Nov 22, 2020

See from this comment #11060 (comment) -- it's working well for me.

Hyokune Nov 22, 2020

Oh right it looks like I just forgot to include the jest.mock, thank you.

LTe · 2021-12-10T14:09:33Z

LTe
Dec 10, 2021

import initHeadManager from 'next/dist/client/head-manager';
import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context';
import { useEffect } from 'react';
import ReactDOMServer from 'react-dom/server';

export const HeadWrapper: React.FC = props => {
  const { children } = props;
  const manager = initHeadManager();

  useEffect(() => {
    global.document.head.insertAdjacentHTML(
      'afterbegin',
      ReactDOMServer.renderToString(<meta name="next-head-count" content="0" />)
    );
  });

  return (
    <HeadManagerContext.Provider value={manager}>
      {children}
    </HeadManagerContext.Provider>
  );
};

And test

  it('renders a title', async () => {
    const episodes = getEpisodes();

    render(
      <EpisodePage
        episodes={episodes}
      />,
      { wrapper: HeadWrapper }
    );

    await waitFor(() => {
      expect(document.title).toEqual('Episode 1 - Peanutbutter girl comic');
    });
  });

We need to use waitFor because next will set head content after render.

0 replies

LukasBombach · 2022-03-22T09:38:02Z

LukasBombach
Mar 22, 2022

For anyone looking for a coming here from googling how to query element in the <head> with react-testing-library, use within(document.head):

import { render, within } from '@testing-library/react';

render(<TheThingThatRendersToHead data-testid="my-test-id" />);
const myThing = within(document.head).getByTestId('my-test-id');

0 replies

pzi · 2022-07-04T09:57:41Z

pzi
Jul 4, 2022

Looks like the HeadManager has changed in v12.2.0 and the HeadManagerContext.Provider solution no longer works as intended. I am getting next-head-count is missing console logs and 0 head counts.

2 replies

nikolajajac Aug 5, 2022

To fix the issue, I modified the solution from @LTe to the following:

import initHeadManager from 'next/dist/client/head-manager';
import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context';
import { FC } from 'react';
import ReactDOMServer from 'react-dom/server';

export const HeadWrapper: FC<any> = ({ children }) => {
  const manager = initHeadManager();

  const updateHead = manager.updateHead;
  manager.updateHead = (jsxHead: JSX.Element[]) => {
    const head = global.document.head;
    if (!head.querySelector('meta[name=next-head-count]')) {
      head.insertAdjacentHTML('afterbegin', ReactDOMServer.renderToString(<meta name="next-head-count" content="0" />));
    }

    updateHead(jsxHead);
  };

  return <HeadManagerContext.Provider value={manager}>{children}</HeadManagerContext.Provider>;
};

Nice consequence is also that you don't have to use waitFor anymore, as useEffect is not used in the implementation.

pzi Sep 6, 2022

Awesome! Works mighty fine, thanks heaps @nikolajajac

etienne-martin · 2022-08-11T01:30:50Z

etienne-martin
Aug 11, 2022

I ended up mocking next/head and using ReactDOM.createPortal to put stuff at the right place.

// ./mocks/next/head.mock.ts

import type { FC } from "react";
import React from "react";
import ReactDOM from "react-dom";

const HeadMock: FC = ({ children }) => {
  return <>{ReactDOM.createPortal(children, document.head)}</>;
};

jest.doMock("next/head", () => HeadMock);

Here's how I use it:

import "./mocks/next/head.mock";
import Head from "next/head";

it("should set the page title", () => {
  render(
    <Head>
      <title>Hello world</title>
    </Head>
  );

  expect(document.head.querySelector("title")?.innerHTML).toEqual("Hello world");
});

3 replies

pzi Sep 6, 2022

Sadly didn't work me for some reason. However, @nikolajajac's solution did

evgeniy28 Sep 9, 2022

some fix head.mock.tsx for me:

// ./mocks/next/head.mock.tsx

import React from 'react'
import ReactDOM from 'react-dom'

import type {FC} from 'react'

interface HeadMockProps {
  children: React.ReactNode
}

const HeadMock: FC<HeadMockProps> = ({children}) => {
  return <>{ReactDOM.createPortal(children, document.head)}</>
}

jest.doMock('next/head', () => HeadMock)

aquinq Dec 6, 2022

@etienne-martin thanks a lot for sharing, best solution so far 👍

kenryu42 · 2023-01-18T09:31:13Z

kenryu42
Jan 18, 2023

For Next.js 13 app directory users:

// ./src/app/head.tsx

export default function Head() {
  return (
    <>
      <title>Create Next App</title>
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <meta name="description" content="Generated by create next app" />
      <link rel="icon" href="/favicon.ico" />
    </>
  )
}

// ./__test__/head.test.tsx

import { render } from '@testing-library/react';
import Head from '../src/app/head';

describe('Head', () => {
  it('renders correct title', () => {
    render(<Head />);

    expect(document.title).toBe('Create Next App');
  });
});

0 replies

How to test metadata using jest and react library test #11060

Replies: 13 suggested answers · 16 replies

Insert Link

Replies: 13 suggested answers 16 replies