tessl/npm-vue--test-utils

Vue.js testing utilities for Vue 3 applications providing component mounting, wrapper classes, and test utilities

—

Pending

Overview

Eval results

Files

Component Mounting

Name: tessl/npm-vue--test-utils
Author: tessl

Core mounting functionality for creating testable Vue component instances with full control over props, slots, and environment configuration.

Capabilities

Mount Function

Creates a full Vue component instance with all lifecycle hooks executed and child components rendered.

/**
 * Mount a Vue component for testing with full rendering
 * @param component - Vue component to mount
 * @param options - Mounting configuration options
 * @returns VueWrapper instance for testing interactions
 */
function mount<T>(
  component: T,
  options?: ComponentMountingOptions<T>
): VueWrapper<ComponentPublicInstance<T>>;

Usage Examples:

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

// Basic mounting
const wrapper = mount(MyComponent);

// Mount with props
const wrapper = mount(MyComponent, {
  props: {
    title: "Test Title",
    count: 42,
    items: ["apple", "banana"]
  }
});

// Mount with slots
const wrapper = mount(MyComponent, {
  slots: {
    default: "Default slot content",
    header: "<h1>Header Content</h1>",
    footer: { template: "<footer>Custom Footer</footer>" }
  }
});

// Mount with global configuration
const wrapper = mount(MyComponent, {
  global: {
    plugins: [router, store],
    provide: {
      theme: "dark"
    },
    stubs: {
      "router-link": true
    }
  }
});

Shallow Mount Function

Creates a Vue component instance with child components automatically stubbed for isolated testing.

/**
 * Mount a Vue component with shallow rendering (child components stubbed)
 * @param component - Vue component to mount
 * @param options - Mounting configuration options
 * @returns VueWrapper instance for testing interactions
 */
function shallowMount<T>(
  component: T, 
  options?: ComponentMountingOptions<T>
): VueWrapper<ComponentPublicInstance<T>>;

Usage Examples:

import { shallowMount } from "@vue/test-utils";
import ParentComponent from "./ParentComponent.vue";

// Shallow mount automatically stubs child components
const wrapper = shallowMount(ParentComponent, {
  props: {
    data: { id: 1, name: "Test" }
  }
});

// Child components are rendered as stubs
expect(wrapper.html()).toContain('<child-component-stub');

Server-Side Rendering

Renders a Vue component to an HTML string for server-side rendering testing.

/**
 * Render a Vue component to HTML string for SSR testing
 * @param component - Vue component to render
 * @param options - Rendering configuration (attachTo not supported)
 * @returns Promise resolving to HTML string
 */
function renderToString<T>(
  component: T,
  options?: ComponentMountingOptions<T>
): Promise<string>;

Usage Examples:

import { renderToString } from "@vue/test-utils";
import MyComponent from "./MyComponent.vue";

// Render component to HTML string
const html = await renderToString(MyComponent, {
  props: {
    message: "Hello SSR"
  }
});

expect(html).toContain("Hello SSR");

Component Mounting Options

Configuration interface for mounting components with type safety.

interface ComponentMountingOptions<T> {
  /** Component props with type checking based on component definition */
  props?: ComponentProps<T>;
  
  /** Component slots with type-safe slot definitions */
  slots?: {
    [K in keyof ComponentSlots<T>]: 
      | string 
      | VNode 
      | Component 
      | { template: string }
      | ((props: any) => VNode);
  };
  
  /** Global configuration applied to the component */
  global?: GlobalMountOptions;
  
  /** Enable shallow rendering (stub child components) */
  shallow?: boolean;
  
  /** DOM element or selector to attach the component to */
  attachTo?: Element | string;
  
  /** HTML attributes to apply to the root element */
  attrs?: Record<string, unknown>;
  
  /** Component data function override */
  data?(): Record<string, unknown>;
}

interface GlobalMountOptions {
  /** Global components available to the mounted component */
  components?: Record<string, Component>;
  
  /** Vue app configuration overrides */
  config?: Partial<AppConfig>;
  
  /** Global directives available to the component */
  directives?: Record<string, Directive>;
  
  /** Global mixins applied to the component */
  mixins?: ComponentOptions[];
  
  /** Mock objects for global properties */
  mocks?: Record<string, any>;
  
  /** Vue plugins to install */
  plugins?: Array<Plugin | [Plugin, ...any[]]>;
  
  /** Values to provide via dependency injection */
  provide?: Record<string | symbol, any>;
  
  /** Component stubs configuration */
  stubs?: Stubs;
  
  /** Whether to render default slot content in stubs */
  renderStubDefaultSlot?: boolean;
}

type Stubs = Record<string, Component | boolean | string> | string[];

Error Handling

Mount functions may throw errors in the following scenarios:

Invalid Component: When the component parameter is not a valid Vue component
Props Validation: When provided props don't match component prop definitions (in development)
Attachment Error: When attachTo references a non-existent DOM element
Plugin Error: When global plugins fail to install properly

Common error handling patterns:

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

try {
  const wrapper = mount(MyComponent, {
    props: { requiredProp: "value" },
    attachTo: document.body
  });
} catch (error) {
  console.error("Mount failed:", error.message);
}

Install with Tessl CLI