When working with NextJs 13+ and the experimental App folder, it is possible to write async server components according to the documentation:
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>
</>
);
}
I have found this to be a valuable technique that I have applied in multiple areas of my application. However, when attempting to write tests using jest, I encounter difficulties rendering the default export:
it('should render without crashing', async () => {
...(set up mocks)
const { container } = await waitFor(() => render(<Page params={{ username: 'Bob Dylan' }} />));
});
Every effort to render the component manually or through a test results in the error message:
Uncaught [Error: Objects are not valid as a React child (found: [object Promise])
Has anyone successfully managed to write a Jest test for an async server component?