Testing layout components

[ver1fy]

I've been following the official documentation to create per-page layouts with Next. However, I'm not quite sure how to test these in isolation using React Testing Library. I'm a little rusty with TypeScript, so apologies if the answer is blindingly obvious.

The layout component looks something like this:

const MyLayout = (page: ReactElement) => (
  <div className="container">
    {page}
    <span>Footnote</span>
  </div>
);

And the corresponding test:

describe('MyLayout', () => {
  it('renders the footnote', () => {
    render() // <-- render MyLayout here.

    const footnote = screen.getByText('Footnote');
    expect(footnote).toBeInTheDocument();
  }
}

For context, my pages consume the layout using MyPage.getLayout = MyLayout;. As per the guide, there is of course some logic in _app.tsx to wrap a page with its chosen layout.

Any guidance is much appreciated. Thanks for taking a look!

[icyJoseph]

I guess you want to do something like this?

describe('MyLayout', () => {
    it('renders the footnote', () => {
        render(MyLayout(<div>Dummy</div>)); // <-- render MyLayout here.

        const footnote = screen.getByText('Footnote');
        expect(footnote).toBeInTheDocument();
        expect(screen.getByText(/dummy/i)).toBeInTheDocument();
    });
});

[ver1fy]

Thanks for taking the time to reply. This solution only seems to work if the custom layout component doesn’t use hooks. Take this, for example:

const MyLayout = (page: ReactElement) => {
  const [count, setCount] = useState(false);
  return (
    <div className="container">
      {page}
      <span>Footnote</span>
    </div>
  );
}

The test returns an 'Invalid hook call' error. I suspect this might be the result of calling a React function component rather than rendering it.

I'll report back here if I manage to make any progress.

[icyJoseph]

Yeah, however in this case, and I guess it's not your fault for missing this, the docs show you how to use hooks in Layouts.

See here.

Notice that Layout is used in the getLayout function, which in turn is defined like this:

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

// some other file
function Layout({ children }) {
  const { data, error } = useSWR('/api/navigation', fetcher)

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <>
      <Navbar links={data.links} />
      <main>{children}</main>
      <Footer />
    </>
  )
}

You have made an assumption, I thought for some other reason, on looking at getLayout as a React component, but notice, that in the docs they have it as getLayout with lowercase, and that it does not take props, but a page. Perhaps change your MyLayout to myLayout to avoid confusion.

To use hooks, place them inside a wrapper component such as Layout. The article you linked, is also hinting at this, but in the opposite direction. Do not think of functions as React components (sort of like, all apples are fruits, but not all fruits are apples).

[ver1fy]

The docs do indeed demonstrate how to use hooks, although specifically for fetching data on the client-side. The only difference I can see between MyLayout and Layout (besides syntax) is the way in which these components are consumed. Would I be correct in saying that your solution is just to wrap the layout component with a function when consumed?

1. Define custom layout

const MyLayout = ({children}) => {
  const [count, setCount] = useState(false);
  return (
    <div className="container">
      {page}
      <span>Footnote</span>
    </div>
  );
}

2. Consume custom layout in page

MyPage.getLayout = function getLayout(page: ReactElement) {
  return <MyLayout>{page}</MyLayout>;
}

3. Test the layout component

describe('MyLayout', () => {
  it('renders the footnote', () => {
    render(<MyLayout><div>Dummy</div></MyLayout>)); // <-- render MyLayout here.

    const footnote = screen.getByText('Footnote');
    expect(footnote).toBeInTheDocument();
    expect(screen.getByText(/dummy/i)).toBeInTheDocument();
  });
});

If so, the test passes and doesn't complain about hooks. This solution makes consuming layouts a bit more cumbersome; however, it is an acceptable trade-off if it means that tests behave as expected.

[icyJoseph]

Yeah, I think you'd have to go with this approach, but that's how per-page layouts really work on Next.js, they wrap pages with React components, but are not components themselves.

[ver1fy]

Understood. Thanks once again for your input. For reference, I also found this article useful.

[Bernardoow]

I had a error and I made this.
Error -> In HTML, %s cannot be a child of <%s>.%s

 it("renders correctly", async () => {
    render(
      <RootLayout>
        <div>Root Layout</div>
      </RootLayout>,
    );
    expect(screen.getByText("Root Layout")).toBeInTheDocument();

  });

Success

  it("renders correctly", async () => {
  render(
    <RootLayout>
      <div>Root Layout</div>
    </RootLayout>,
    { container: document },
  );

  expect(screen.getByText("Root Layout")).toBeInTheDocument();
});

[washingtonsoares]

I've been using this approach:

const renderComponent = () => {
  const page = <MyPage />;
  const pageWithLayout = MyPage.getLayout(page);
  return render(pageWithLayout);
};

[DanielSalazarLoaiza]

You can test the layout in isolation by rendering it as a regular React component — just wrap a simple mock page element inside it.

For example:

import { render, screen } from '@testing-library/react';
import React from 'react';
import { MyLayout } from '@/components/MyLayout'; // adjust import as needed

describe('MyLayout', () => {
it('renders the footnote', () => {
const mockPage =

Mock Page

;
render(MyLayout(mockPage));

expect(screen.getByText('Footnote')).toBeInTheDocument();
expect(screen.getByText('Mock Page')).toBeInTheDocument();

});
});

Since your layout function takes a ReactElement and returns JSX, you can just call it directly in the test.
No need to involve _app.tsx or the getLayout logic — you’re testing the layout component’s rendering, not integration.