Component Rendering

/**
 * Render a Vue component for testing
 * @param TestComponent - The Vue component to render
 * @param options - Rendering options including props, slots, and mounting configuration
 * @returns RenderResult with queries and utilities
 */
function render<C>(
  TestComponent: C,
  options?: RenderOptions<C>
): RenderResult;

interface RenderOptions<C> {
  /** Component props */
  props?: ComponentProps<C>;
  /** Component slots */
  slots?: ExtractSlots<C>;
  /** Custom container element to render in */
  container?: Element;
  /** Custom base element (parent of container) */
  baseElement?: Element;
  /** Global configuration for Vue Test Utils */
  global?: {
    /** Vue plugins to install */
    plugins?: any[];
    /** Global mixins */
    mixins?: any[];
    /** Global mocks */
    mocks?: Record<string, unknown>;
    /** Provide/inject values */
    provide?: Record<string | symbol, unknown>;
    /** Global components */
    components?: Record<string, Component>;
    /** Global directives */
    directives?: Record<string, Directive>;
    /** Component stubs */
    stubs?: Record<string, any>;
    /** Vue config options */
    config?: {
      globalProperties?: Record<string, any>;
      optionMergeStrategies?: Record<string, any>;
    };
  };
}

import { render } from "@testing-library/vue";
import UserProfile from "./UserProfile.vue";

// Basic rendering with props
const { getByText } = render(UserProfile, {
  props: {
    name: "John Doe",
    email: "john@example.com"
  }
});

// Rendering with slots
const { getByRole } = render(UserProfile, {
  slots: {
    default: "<p>Custom content</p>",
    footer: "<button>Save</button>"
  }
});

// Rendering with global plugins
const { getByTestId } = render(UserProfile, {
  global: {
    plugins: [router, store],
    mocks: {
      $t: (key) => key // Mock i18n
    }
  }
});

/**
 * Unmount all rendered components and clean up DOM
 */
function cleanup(): void;

import { render, cleanup } from "@testing-library/vue";

// Manual cleanup (usually not needed)
afterEach(() => {
  cleanup();
});

interface RenderResult {
  /** Container element where component is mounted */
  container: Element;
  /** Base element (parent of container) */
  baseElement: Element;
  
  /** Debug function to print DOM structure */
  debug: (
    element?: Element | Element[],
    maxLength?: number,
    options?: PrettyFormatOptions
  ) => void;
  
  /** Unmount the component */
  unmount(): void;
  
  /** Get component HTML as string */
  html(): string;
  
  /** Get all emitted events */
  emitted<T = unknown>(): Record<string, T[]>;
  
  /** Get emitted events by name */
  emitted<T = unknown>(name?: string): T[];
  
  /** Update component props */
  rerender(props: object): Promise<void>;
  
  // All DOM Testing Library query functions
  getByRole(role: string, options?: ByRoleOptions): HTMLElement;
  queryByRole(role: string, options?: ByRoleOptions): HTMLElement | null;
  findByRole(role: string, options?: ByRoleOptions): Promise<HTMLElement>;
  getByText(text: string | RegExp, options?: ByTextOptions): HTMLElement;
  queryByText(text: string | RegExp, options?: ByTextOptions): HTMLElement | null;
  findByText(text: string | RegExp, options?: ByTextOptions): Promise<HTMLElement>;
  getByLabelText(text: string | RegExp, options?: ByLabelTextOptions): HTMLElement;
  queryByLabelText(text: string | RegExp, options?: ByLabelTextOptions): HTMLElement | null;
  findByLabelText(text: string | RegExp, options?: ByLabelTextOptions): Promise<HTMLElement>;
  getByPlaceholderText(text: string | RegExp, options?: ByPlaceholderTextOptions): HTMLElement;
  queryByPlaceholderText(text: string | RegExp, options?: ByPlaceholderTextOptions): HTMLElement | null;
  findByPlaceholderText(text: string | RegExp, options?: ByPlaceholderTextOptions): Promise<HTMLElement>;
  getByAltText(text: string | RegExp, options?: ByAltTextOptions): HTMLElement;
  queryByAltText(text: string | RegExp, options?: ByAltTextOptions): HTMLElement | null;
  findByAltText(text: string | RegExp, options?: ByAltTextOptions): Promise<HTMLElement>;
  getByTitle(text: string | RegExp, options?: ByTitleOptions): HTMLElement;
  queryByTitle(text: string | RegExp, options?: ByTitleOptions): HTMLElement | null;
  findByTitle(text: string | RegExp, options?: ByTitleOptions): Promise<HTMLElement>;
  getByDisplayValue(text: string | RegExp, options?: ByDisplayValueOptions): HTMLElement;
  queryByDisplayValue(text: string | RegExp, options?: ByDisplayValueOptions): HTMLElement | null;
  findByDisplayValue(text: string | RegExp, options?: ByDisplayValueOptions): Promise<HTMLElement>;
  getByTestId(testId: string, options?: ByTestIdOptions): HTMLElement;
  queryByTestId(testId: string, options?: ByTestIdOptions): HTMLElement | null;
  findByTestId(testId: string, options?: ByTestIdOptions): Promise<HTMLElement>;
  getAllByRole(role: string, options?: ByRoleOptions): HTMLElement[];
  queryAllByRole(role: string, options?: ByRoleOptions): HTMLElement[];
  findAllByRole(role: string, options?: ByRoleOptions): Promise<HTMLElement[]>;
  getAllByText(text: string | RegExp, options?: ByTextOptions): HTMLElement[];
  queryAllByText(text: string | RegExp, options?: ByTextOptions): HTMLElement[];
  findAllByText(text: string | RegExp, options?: ByTextOptions): Promise<HTMLElement[]>;
  getAllByLabelText(text: string | RegExp, options?: ByLabelTextOptions): HTMLElement[];
  queryAllByLabelText(text: string | RegExp, options?: ByLabelTextOptions): HTMLElement[];
  findAllByLabelText(text: string | RegExp, options?: ByLabelTextOptions): Promise<HTMLElement[]>;
  getAllByPlaceholderText(text: string | RegExp, options?: ByPlaceholderTextOptions): HTMLElement[];
  queryAllByPlaceholderText(text: string | RegExp, options?: ByPlaceholderTextOptions): HTMLElement[];
  findAllByPlaceholderText(text: string | RegExp, options?: ByPlaceholderTextOptions): Promise<HTMLElement[]>;
  getAllByAltText(text: string | RegExp, options?: ByAltTextOptions): HTMLElement[];
  queryAllByAltText(text: string | RegExp, options?: ByAltTextOptions): HTMLElement[];
  findAllByAltText(text: string | RegExp, options?: ByAltTextOptions): Promise<HTMLElement[]>;
  getAllByTitle(text: string | RegExp, options?: ByTitleOptions): HTMLElement[];
  queryAllByTitle(text: string | RegExp, options?: ByTitleOptions): HTMLElement[];
  findAllByTitle(text: string | RegExp, options?: ByTitleOptions): Promise<HTMLElement[]>;
  getAllByDisplayValue(text: string | RegExp, options?: ByDisplayValueOptions): HTMLElement[];
  queryAllByDisplayValue(text: string | RegExp, options?: ByDisplayValueOptions): HTMLElement[];
  findAllByDisplayValue(text: string | RegExp, options?: ByDisplayValueOptions): Promise<HTMLElement[]>;
  getAllByTestId(testId: string, options?: ByTestIdOptions): HTMLElement[];
  queryAllByTestId(testId: string, options?: ByTestIdOptions): HTMLElement[];
  findAllByTestId(testId: string, options?: ByTestIdOptions): Promise<HTMLElement[]>;
}

type ComponentProps<C> = C extends new (...args: any) => any 
  ? InstanceType<C>['$props'] 
  : never;

type ExtractSlots<C> = {
  [K in keyof ComponentSlots<C>]?: ComponentSlots<C>[K] | VNodeChild
};

interface PrettyFormatOptions {
  callToJSON?: boolean;
  escapeRegex?: boolean;
  escapeString?: boolean;
  highlight?: boolean;
  indent?: number;
  maxDepth?: number;
  min?: boolean;
  plugins?: any[];
  printFunctionName?: boolean;
  theme?: any;
}