0

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?

Jason Gross
  • 260
  • 1
  • 10

1 Answers1

0

Your render function call in your test looks incorrect (closing > is missing)

Have fixed it to:

render(<MyPage params={{ id: 'test' }} />)
Robin Thomas
  • 1,317
  • 8
  • 15