비동기 UI 와 커스텀 Render 헬퍼

// Async — findBy for elements that appear later
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { UserProfile } from './user-profile';

describe('<UserProfile />', () => {
  it('shows the spinner, then the name', async () => {
    render(<UserProfile id={1} />);

    // Immediately visible — synchronous query
    expect(screen.getByRole('progressbar')).toBeInTheDocument();

    // Appears after fetch resolves — async query
    const name = await screen.findByRole('heading', { name: /pippa choi/i });
    expect(name).toBeInTheDocument();

    // Optionally assert the spinner is gone
    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
  });
});

// waitFor — for assertions that aren't just 'element appeared'
import { describe, it, expect, vi } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Counter } from './counter';

it('eventually persists the count to localStorage', async () => {
  const setItem = vi.spyOn(Storage.prototype, 'setItem');
  const user = userEvent.setup();

  render(<Counter />);
  await user.click(screen.getByRole('button', { name: /increment/i }));

  // The persistence is debounced — wait until it actually fires.
  await waitFor(() => {
    expect(setItem).toHaveBeenCalledWith('count', '1');
  });
});

// waitForElementToBeRemoved — for spinners, toasts, modals closing
import { waitForElementToBeRemoved } from '@testing-library/react';

it('hides the loading toast after the request completes', async () => {
  render(<UploadForm />);
  // ... trigger upload
  await waitForElementToBeRemoved(() => screen.queryByText(/uploading/i));
  expect(screen.getByText(/upload complete/i)).toBeInTheDocument();
});

// src/test-utils.tsx — your custom render that knows about providers
import { render, RenderOptions } from '@testing-library/react';
import { ReactElement, ReactNode } from 'react';
import { ThemeProvider } from './theme';
import { MemoryRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

type CustomRenderOptions = Omit<RenderOptions, 'wrapper'> & {
  initialRoute?: string;
  theme?: 'light' | 'dark';
};

function AllProviders({
  children,
  initialRoute = '/',
  theme = 'light',
}: { children: ReactNode } & CustomRenderOptions) {
  // A fresh QueryClient per test prevents cache bleed between tests.
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } }, // tests shouldn't retry
  });

  return (
    <ThemeProvider mode={theme}>
      <QueryClientProvider client={queryClient}>
        <MemoryRouter initialEntries={[initialRoute]}>{children}</MemoryRouter>
      </QueryClientProvider>
    </ThemeProvider>
  );
}

export function renderWithProviders(
  ui: ReactElement,
  { initialRoute, theme, ...rtlOptions }: CustomRenderOptions = {}
) {
  return render(ui, {
    wrapper: ({ children }) => (
      <AllProviders initialRoute={initialRoute} theme={theme}>
        {children}
      </AllProviders>
    ),
    ...rtlOptions,
  });
}

// Re-export everything else so tests have one import path.
export * from '@testing-library/react';
export { renderWithProviders as render };

// Tests import from test-utils, get providers for free.
import { describe, it, expect } from 'vitest';
import { render, screen } from './test-utils';   // ← custom, not @testing-library/react
import { Dashboard } from './dashboard';

describe('<Dashboard />', () => {
  it('renders the welcome banner', async () => {
    render(<Dashboard />);
    // ThemeProvider, MemoryRouter, QueryClientProvider all already in scope.
    expect(await screen.findByText(/welcome back/i)).toBeInTheDocument();
  });

  it('shows the dark-mode style when the theme option is dark', () => {
    render(<Dashboard />, { theme: 'dark' });
    expect(screen.getByRole('main')).toHaveClass('theme-dark');
  });

  it('starts at /reports when initialRoute is set', async () => {
    render(<Dashboard />, { initialRoute: '/reports' });
    expect(
      await screen.findByRole('heading', { name: /monthly reports/i })
    ).toBeInTheDocument();
  });
});