How to Setup Our Own Sendgrid, Mailgun or Postmark like SMTP Server

Testing Grommet UI Compents with Jest in a NextJS project

Prashant

I've got a NextJS project that uses Grommet UI. When I try and test it using Jest I get the following error:

TypeError: Cannot read properties of undefined (reading 'pageHeader')

I wrap a Layout with the Grommet component like this:

type LayoutProps = {
  children: React.ReactNode,
};

export default function Layout({ children }: LayoutProps) {
  return (
    <Grommet plain>
      <Page kind="narrow">
        <PageContent>
          <main>{children}</main>
        </PageContent>
      </Page>
    </Grommet>
  )
}

and then my app.ts file looks like this:

function MyApp({ Component, pageProps }: AppProps) {
  return <Layout>
    <Component {...pageProps} />
  </Layout>
};

Then I have a basic component that contains Gommet's PageHeader component:

const RegionDetail: React.FC<{ title: string }> =  ({title}) => {
  return (
    <section>
      <PageHeader title={ title }></PageHeader>
    </section>
  );
};

Then the test itself is failing on the first line:

describe('RegionDetails', () => {
  test('Region Details', () => {
    render(<RegionDetail title="test" />);
  });
});

If I add the Gromet component to the test it passes:

describe('RegionDetails', () => {
  test('Region Details', () => {
    render(<Grommet plain><RegionDetail title="test" /></Grommet>);
  });
});