在使用实验性 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 测试?
目前还没有官方的方法可以做到这一点。您可以使用此解决方法:
it('should render without crashing', async () => {
// ...(setup mocks)
render(await Page({params: {username: 'Bob Dylan' }}))
});
它并不完美,但它是当前的解决方案。查看本期了解更多信息。
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 测试库文档