Testing Custom Render con Múltiples Providers

gistfile1.txt

// test-utils/custom-render.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AuthProvider } from '@/contexts/AuthContext'
import { ThemeProvider } from '@/contexts/ThemeContext'

interface RenderOptions {
  initialUser?: User
  theme?: 'light' | 'dark'
  queryClient?: QueryClient
}

export const renderWithProviders = (
  ui: React.ReactElement,
  {
    initialUser = null,
    theme = 'light',
    queryClient = createTestQueryClient(),
    ...renderOptions
  }: RenderOptions = {}
) => {
  const Wrapper = ({ children }) => (
    <QueryClientProvider client={queryClient}>
      <AuthProvider initialUser={initialUser}>
        <ThemeProvider initialTheme={theme}>
          {children}
        </ThemeProvider>
      </AuthProvider>
    </QueryClientProvider>
  )

  return render(ui, { wrapper: Wrapper, ...renderOptions })
}

// Uso
it('muestra contenido para usuario autenticado', () => {
  renderWithProviders(<Dashboard />, {
    initialUser: { id: 1, name: 'John' },
    theme: 'dark'
  })

  expect(screen.getByText(/welcome, john/i)).toBeInTheDocument()
})