在 Next 13 中使用 Jest 测试异步服务器组件

Question

在 NextJs 13+ 中，使用实验性 App 文件夹，可以编写异步服务器组件，如文档所述：

export default async function Page({ params: { username } }) {
  // Initiate both requests in parallel
  const artistData = getArtist(username);
  const albumsData = getArtistAlbums(username);

  // Wait for the promises to resolve
  const [artist, albums] = await Promise.all([artistData, albumsData]);

  return (
    <>
      <h1>{artist.name}</h1>
      <Albums list={albums}></Albums>
    </>
  );
}

这是一项非常有用的技术，我已经在应用程序的许多页面中实现了。但是，当使用 jest 进行测试时，我发现我无法编写任何能够呈现此默认导出的测试：

it('should render without crashing', async () => {
  ...(setup mocks)
  const { container } = await waitFor(() => render(<Page params={{ username: 'Bob Dylan' }} />));
});

任何渲染组件或手动调用它的尝试都会导致以下错误：

未捕获 [错误：对象作为 React 子对象无效（发现：[对象 Promise]）

有没有人能够使用异步服务器组件正确实现 Jest 测试？

Answer 1

目前还没有官方的方法可以做到这一点。您可以使用此解决方法：

it('should render without crashing', async () => {
  // ...(setup mocks)
  render(await Page({params: {username: 'Bob Dylan' }}))
});

它并不完美，但它是当前的解决方案。查看此问题以获取更多信息。