Vue Component Wrapper

/**
 * The Vue component instance with setup state proxy
 * Provides access to component data, methods, computed properties, and exposed values
 */
readonly vm: ComponentPublicInstance;

import { mount } from "@vue/test-utils";

const wrapper = mount(MyComponent);

// Access component data and methods
console.log(wrapper.vm.message);
wrapper.vm.handleClick();

// Access computed properties
expect(wrapper.vm.computedValue).toBe("expected");

// Access exposed values (script setup)
expect(wrapper.vm.exposedMethod).toBeDefined();

/**
 * Get all component props or a specific prop value
 * @param key - Optional prop key to retrieve specific value
 * @returns All props object or specific prop value
 */
props(): Record<string, any>;
props(key: string): any;

/**
 * Update component props and trigger reactivity
 * @param props - Props object to merge with existing props
 * @returns Promise that resolves after props update and re-render
 */
setProps(props: Record<string, any>): Promise<void>;

const wrapper = mount(MyComponent, {
  props: { title: "Initial", count: 0 }
});

// Get all props
const allProps = wrapper.props();
expect(allProps).toEqual({ title: "Initial", count: 0 });

// Get specific prop
expect(wrapper.props("title")).toBe("Initial");

// Update props
await wrapper.setProps({ title: "Updated", count: 5 });
expect(wrapper.props("title")).toBe("Updated");

/**
 * Get all emitted events or events for a specific event name
 * @param eventName - Optional event name to filter results
 * @returns All emitted events or filtered events array
 */
emitted(): Record<string, unknown[][]>;
emitted<T = unknown[]>(eventName: string): T[];

const wrapper = mount(MyComponent);

// Trigger an action that emits events
await wrapper.find('button').trigger('click');

// Get all emitted events
const allEvents = wrapper.emitted();
console.log(allEvents); // { click: [[]], input: [["value"]] }

// Get specific event
const clickEvents = wrapper.emitted('click');
expect(clickEvents).toHaveLength(1);

// Check event payload
const inputEvents = wrapper.emitted('input');
expect(inputEvents[0]).toEqual(["expected payload"]);

/**
 * Update component data and trigger reactivity
 * @param data - Data object to merge with existing component data
 * @returns Promise that resolves after data update and re-render
 */
setData(data: Record<string, any>): Promise<void>;

const wrapper = mount(MyComponent);

// Update component data
await wrapper.setData({
  message: "New message",
  isActive: true
});

// Verify data changes
expect(wrapper.vm.message).toBe("New message");
expect(wrapper.text()).toContain("New message");

/**
 * Set value on form inputs and emit appropriate events (input, change)
 * @param value - Value to set on the element
 * @returns Promise that resolves after value is set and events are emitted
 */
setValue(value: any): Promise<void>;

const wrapper = mount(MyComponent);

// Set input value
await wrapper.find('input[type="text"]').setValue("test value");

// Set checkbox state
await wrapper.find('input[type="checkbox"]').setValue(true);

// Set select value
await wrapper.find('select').setValue("option2");

/**
 * Unmount the component and perform cleanup
 * Triggers beforeUnmount and unmounted lifecycle hooks
 */
unmount(): void;

/**
 * Check if the component still exists and is mounted
 * @returns true if component is still mounted, false otherwise
 */
exists(): boolean;

/**
 * Get the internal component instance
 * @returns Vue internal component instance
 */
getCurrentComponent(): ComponentInternalInstance;

const wrapper = mount(MyComponent);

// Check if component exists
expect(wrapper.exists()).toBe(true);

// Access internal component instance
const instance = wrapper.getCurrentComponent();
console.log(instance.uid);

// Unmount component
wrapper.unmount();
expect(wrapper.exists()).toBe(false);

/**
 * Check if the component is visible in the DOM
 * Considers CSS display, visibility, and opacity properties
 * @returns true if component is visible, false otherwise
 */
isVisible(): boolean;

const wrapper = mount(MyComponent);

// Check visibility
expect(wrapper.isVisible()).toBe(true);

// After hiding with CSS
await wrapper.setData({ isHidden: true });
expect(wrapper.isVisible()).toBe(false);

// Element querying
find<T extends Node = Node>(selector: string): DOMWrapper<T>;
findAll<T extends Node = Node>(selector: string): DOMWrapper<T>[];
findComponent(selector: FindComponentSelector): VueWrapper<any>;
findAllComponents(selector: FindAllComponentsSelector): VueWrapper<any>[];

// Element retrieval (throws if not found)
get<T extends Node = Node>(selector: string): DOMWrapper<T>;
getComponent(selector: FindComponentSelector): VueWrapper<any>;

// Content inspection
html(): string;
text(): string;
classes(): string[];
classes(className: string): boolean;
attributes(): Record<string, string>;
attributes(key: string): string;

// Event triggering
trigger(eventString: string, options?: TriggerOptions): Promise<void>;

// Generic type preservation
const wrapper = mount<MyComponentType>(MyComponent);
wrapper.vm; // Typed as MyComponentType instance

// Component-specific prop typing
await wrapper.setProps({
  validProp: "value" // TypeScript validates against component props
});

// Event payload typing
const events = wrapper.emitted<[string, number]>('custom-event');
// events is typed as [string, number][]

const wrapper = mount(MyComponent);

try {
  await wrapper.setProps({ invalidProp: "value" });
} catch (error) {
  console.error("Props update failed:", error.message);
}