typescript 使用Jest测试异步服务器组件

1sbrub3j  于 2023-03-24  发布在  TypeScript
关注(0)|答案(1)|浏览(138)

bounty已结束,回答此问题可获得+100声望奖励,奖励宽限期将在17小时后结束,Felipe正在寻找来自信誉良好的来源的答案:参考文档或来自NextJS贡献者的答案都可以满足这个要求

在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子级无效(找到:[反对承诺])

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

x8diyxa7

x8diyxa71#

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 Methods上的React测试库文档

相关问题