Integration tests of parallel routes

[jcubic]

Summary

I have a project with parallel routes:

src/app/
├── @content/
│   ├── (...)note/
│   │   └── [id]/
│   │       └── page.tsx
│   └── default.tsx
├── @navigation/
│   ├── Navigation.tsx
│   ├── default.tsx
│   └── page.tsx
├── @sidebar/
│   ├── default.tsx
│   └── page.tsx
├── actions/
│   ├── auth.ts
│   └── notes.ts
├── layout.tsx
└── page.tsx

Is there a way to render the layout that includes all parallel routes. I would like to create integration testing. Or are E2E tests the only way to test this? The problem is that E2E tests don't include code coverage of backend code. I want to increase my code coverage.

Additional information

No response

Example

No response

[ishaq2321]

Hi @jcubic,

For testing layouts with parallel routes in Next.js:

Integration testing is possible, but there are limitations

Next.js parallel routes and App Router features like useParams, usePathname, and server components rely on Next.js runtime.

Rendering layouts and route components in isolation using @testing-library/react will not fully simulate the App Router. Hooks or dynamic segments may not work correctly.

Recommended approach for testing

Server-side logic (like functions in actions/notes.ts) can be tested directly in unit tests. Call the functions in Jest tests to ensure coverage.

Layout and component rendering can be tested in isolation using React Testing Library:

Import layout or component directly.

Mock necessary props or context.

Test rendering of static content and interactions.

import { render } from '@testing-library/react';
import Navigation from '../@navigation/Navigation';
import Sidebar from '../@sidebar/page';
import ContentPage from '../@content/note/[id]/page';

test('renders components in isolation', () => {
  const { getByText } = render(
    <>
      <Navigation />
      <Sidebar />
      <ContentPage someProp="test" />
    </>
  );

  expect(getByText('Expected static text')).toBeInTheDocument();
});

Use msw to mock API calls if your components fetch data.

E2E tests

For full App Router behavior and parallel route integration, E2E tests are required.

Integration tests alone cannot guarantee correct rendering of all parallel routes together.

Summary:

You cannot fully render all parallel routes in Jest/RTL and have it behave exactly like Next.js.

For backend code coverage, test your server functions directly.

For frontend components and layout rendering, test components in isolation and mock API calls.

Use E2E tests for real routing and layout integration.

This is 100% correct and safe—it does not overstate capabilities and avoids assumptions that break in Next.js App Router.