Mocking dynamic route params in Next 13 app dir

Question

I'm using Jest and testing library to run unit tests on my NextJS app but struggling to figure out how to render a page on a dynamic path.

For my page/component:

export default async function MyPage({ params }: { params: { id: string }}) {
    return (<p>{params.id}</p>)
}

When trying to run a test:

import { render, screen } from '@testing-library/react';
import MyPage from './page'

it('renders', () => {
    render(<MyPage params={{ id: 'test' }} />)
    expect(screen.findByText('test')).toBeTruthy()
}

I get the following error:

TypeError: Cannot destructure property 'params' of 'undefined' as it is undefined.

How can I define the params object to render this component? I've tried passing it in as a normal prop in this example but I've also attempted to mock the router and force the params property in there with no luck. Has anyone had success mocking the params object that gets populated in dynamic routes under the app directory structure?

Answer 1

Without RSC or app router features

it('should render', async () => {
  render(
    <Suspense>
      <Page params={{ username: 'DN' }} />
    </Suspense>
  );
});

With RSC or app router features

it('should render', async () => {
  render(await Page({params: {username: 'DN' }}))
});