Estoy tratando de hacer pruebas unitarias por primera vez. Quiero probar mi página index.tsx con múltiples componentes dentro. La estructura de mi página index.tsx es así

índice.tsx

 return ( <div> <DefaultLayout meta={ <Meta title="" description="" canonical="https://www.com" /> } > {!props.acceptCookie && <CookieConsent />} <Header promo={props.promo} /> <HomeBody totalPostsToday={props.totalPostsToday} promo={props.promo} postData={props} partners={props.partners} /> <Footer /> </DefaultLayout> </div> )

Si ejecuto mi código de prueba, aparece un error que dice

No detectado [Error: los objetos no son válidos como un elemento secundario de React (encontrado: objeto con claves {almacenar, .... Si pretendía representar una colección de elementos secundarios, use una matriz en su lugar.

index.spec.tsx

 import { act, render } from '@testing-library/react' import { RouterContext } from 'next/dist/shared/lib/router-context' import Index from '@/pages' import { createMockRouter } from '@/test-utils/createMockRouter' import { renderWithProviders } from '@/test-utils/reduxMockProvider' describe('Index page', () => { test('should proper render components', async () => { await act(() => { render( <RouterContext.Provider value={createMockRouter({})}> {renderWithProviders(<Index />)} </RouterContext.Provider> ) }) }) })

Aparte de mi error, ¿está bien mi enfoque o es mejor si hago una prueba de aislamiento por componentes?