Next seo test with react testing library

0 votes
export const Seo: React.FC<Props> = ({ seo, title, excerpt, heroImage }) => {
  const description = seo?.description || excerpt
  const pageTitle = seo?.title || title

  const router = useRouter()

  return (
    <NextSeo // https://www.npmjs.com/package/next-seo
      canonical={seo?.canonical}
      nofollow={seo?.nofollow}
      noindex={seo?.noindex}
      title={pageTitle}
      description={description}
      openGraph={{
        title,
        description,
        type: "article",
this is my SEO component 
and this is my test 
describe("Seo", () => {
  it("should render the meta tags", async () => {
    const props = {
      title: "title page",
      excerpt: "string",
      seo: {
        title: "seo title",
        description: "meta description",
      },
      heroImage: {
        src: "url",
        alt: "alt text",
        width: 300,
        height: 400,
      },
    }

    function getMeta(metaName: string) {
      const metas = document.getElementsByTagName("meta")
      for (let i = 0; i < metas.length; i += 1) {
        if (metas[i].getAttribute("name") === metaName) {
          return metas[i].getAttribute("content")
        }
      }
      return ""
    }

    render(<Seo {...props} />)

    await waitFor(() => expect(getMeta("title")).toEqual("title page"))
  })
})




but it keeps on failing can you help 
Feb 11 in Others by Kichu
• 16,850 points
87 views

1 answer to this question.

0 votes

 you need to mock next/head, pass document.head to the container property of render's options and access the document. 

this would be the test output 

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

describe("Seo", () => {
  it("should render the meta tags", () => {
    const props = {
      title: "title page",
      excerpt: "string",
      seo: {
        title: "seo title",
        description: "meta description",
      },
      heroImage: {
        src: "url",
        alt: "alt text",
        width: 300,
        height: 400,
      },
    }

    render(<Seo {...props} />, { container: document.head })

    expect(document.title).toBe("title page")
  })
})
answered Feb 11 by narikkadan
• 7,860 points

Related Questions In Others

0 votes
1 answer

Next JS Seo with static pages, SSR Pages and Client Side rendering

use getStaticProps() with the revalidate property that ...READ MORE

answered Feb 25 in Others by narikkadan
• 7,860 points
25 views
0 votes
1 answer

Problem with yoast SEO

This is (probably) not a problem of ...READ MORE

answered Feb 10 in Others by narikkadan
• 7,860 points
22 views
0 votes
1 answer

how to show the <meta> values of yoast seo with some function?

check this folder : wordpress-seo\src\presenters\open-graph you can ...READ MORE

answered Feb 10 in Others by narikkadan
• 7,860 points
50 views
+2 votes
2 answers

Is Reactjs SEO friendly? with google bots

Yes, with SERVER-SIDE RENDERING you will not face ...READ MORE

answered Feb 10 in Others by Shreesh
• 160 points
89 views
0 votes
1 answer

Avoid Duplicate Meta Description and Keywords in Next.js

First of all take a deep look ...READ MORE

answered Feb 22 in Others by narikkadan
• 7,860 points
275 views
0 votes
1 answer

How to make Component Variant in Google Optimize A/B testing in Next js

Render all the components in ReactJs after ...READ MORE

answered Feb 18 in Others by narikkadan
• 7,860 points
135 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,680 points
1,696 views
0 votes
1 answer

Error:setState doesn't update the state immediately

Hello @kartik, The method setState() takes a callback. And ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,680 points
3,774 views
0 votes
1 answer

Next JS Seo with static pages, SSR Pages and Client Side rendering

Use getStaticProps()  with a revalidate property because sites ...READ MORE

answered Feb 20 in Others by narikkadan
• 7,860 points
149 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24 in Others by narikkadan
• 7,860 points
80 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP