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

问题描述 投票:0回答:2

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

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 子项无效(已找到:[object Promise])

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

reactjs typescript next.js async-await jestjs
2个回答
0
投票

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

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

它并不完美,但它是当前的解决方案。查看本期了解更多信息。


-1
投票

waitFor 在组件渲染完成后执行回调。

你应该做的是首先渲染组件,然后传递给 waitFor 一个回调,其中包含你要执行的检查。

例如:

it('should render the artist', async () => {
  ...(setup mocks)
  render(<Page params={{ username: 'Bob Dylan' }} />))
  await waitFor(()=>{
    expect(screen.getByText('Bob Dylan')).not.toBeNull()
  };
});

来源:关于 Async 方法的 React 测试库文档

© www.soinside.com 2019 - 2024. All rights reserved.