Question

在 Next 13 应用程序目录中模拟动态路由参数

2023-08-30

1590

javascript reactjs next.js jestjs nextjs-dynamic-routing

我正在使用 Jest 和测试库在我的 NextJS 应用上运行单元测试，但很难弄清楚如何在动态路径上呈现页面。

对于我的页面/组件：

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

尝试运行测试时：

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

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

我收到以下错误：

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

如何定义 params 对象来呈现此组件？我尝试在此示例中将其作为普通 prop 传入，但我也尝试模拟路由器并强制使用 params 属性，但没有成功。有没有人成功模拟在应用程序目录结构下的动态路由中填充的 params 对象？

Answer 1

不带 RSC 或应用程序路由器功能

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

带 RSC 或应用程序路由器功能

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

Answer 2

测试中的 render 函数调用看起来不正确（缺少结束符 > ）

已将其修复为：

render(<MyPage params={{ id: 'test' }} />)