Next.js 13 App目录下动态路由参数的Jest测试Mock问题

你的核心问题在于异步页面组件的渲染处理以及异步查询方法的正确使用，以下是修正后的测试方案：

问题分析 #

1. 你的页面组件是async函数，即使内部没有实际异步逻辑，它也会返回Promise，React需要通过Suspense组件处理这类异步组件的加载状态，直接渲染会导致props传递异常。
2. screen.findByText是异步查询方法，必须配合await使用，直接用expect(...).toBeTruthy()会因为Promise未解析而判断错误。

修正后的测试代码 #

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

it('renders the dynamic ID correctly', async () => {
  // 用Suspense包裹异步页面组件
  render(
    <Suspense fallback={<div>Loading...</div>}>
      <MyPage params={{ id: 'test' }} />
    </Suspense>
  );

  // 等待异步查询结果
  const idElement = await screen.findByText('test');
  expect(idElement).toBeInTheDocument();
});

额外说明 #

• 如果页面组件包含实际数据获取逻辑（如调用fetch），可以在测试中Mock这些异步操作，保证测试环境的独立性。
• 若页面组件无需保留async，可改为同步函数，这样测试时无需包裹Suspense，但App Router下推荐保留async以支持组件内数据获取。

内容的提问来源于stack exchange，提问作者Jason Gross