此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测试?
1条答案
按热度按时间x8diyxa71#
waitFor接受一个回调函数,以便在组件呈现后运行。
您应该做的是首先呈现组件,然后传递给waitFor一个回调函数,其中包含您想要执行的检查。
例如:
来源:Async Methods上的React测试库文档