Hey everyone, I'm new to using the app router, and I'm having trouble testing my page component. Whenever I try to test it, I keep getting failures during rendering. The error message says something about objects not being valid as React children and mentions something about using an array instead. Can anyone help me figure out what I'm doing wrong?

Here's my page component:

export async function page() {
const data = await fetchData();

return (<main> ...content</main>);
}

And here's my test for the page component:

import { render, act } from '@testing-library/react';
import Page from './page'; // Assuming page component is named 'page.js'
import { fetchData } from '@/lib/usePackage';
jest.mock('@/lib/usePackage', () => ({
fetchData: jest.fn(),
}));describe('Page test', () => {
it('should call fetchPackageList and render without throwing an error', async () => {
const mockPackageList = {
platforms: [
{ name: 'Platform A', activePeriod: { unit: 'years' } },
{ name: 'Platform B', activePeriod: { unit: 'months' } },
],
};
fetchPackageList.mockResolvedValue(mockPackageList);
await fetchData();
render(<Page />);
expect(fetchPackageList).toHaveBeenCalledTimes(1);
});
});