or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddom-wrapper.mdindex.mdmounting.mdutilities.mdvue-wrapper.md
tile.json

tessl/npm-vue--test-utils

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/test-utils@2.4.x

To install, run

npx @tessl/cli install tessl/npm-vue--test-utils@2.4.0

index.mddocs/

Vue Test Utils

Vue Test Utils is the official testing library for Vue.js 3 applications, providing essential utilities for mounting components, interacting with them, and making assertions in tests. It offers a comprehensive API for shallow and deep component rendering, DOM manipulation, event triggering, and component state inspection.

Package Information

  • Package Name: @vue/test-utils
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @vue/test-utils

Core Imports

import { mount, shallowMount, VueWrapper, DOMWrapper } from "@vue/test-utils";

For CommonJS:

const { mount, shallowMount, VueWrapper, DOMWrapper } = require("@vue/test-utils");

Basic Usage

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

// Mount a component
const wrapper = mount(MyComponent, {
  props: { message: "Hello World" },
  slots: {
    default: "Slot content"
  }
});

// Make assertions
expect(wrapper.text()).toContain("Hello World");
expect(wrapper.find('[data-test="button"]').exists()).toBe(true);

// Trigger events
await wrapper.find('button').trigger('click');

// Check emitted events
expect(wrapper.emitted('click')).toHaveLength(1);

// Update props
await wrapper.setProps({ message: "Updated message" });

Architecture

Vue Test Utils is built around several key architectural patterns:

  • Mounting Functions: mount() and shallowMount() create component instances with different rendering strategies
  • Wrapper Classes: VueWrapper and DOMWrapper provide unified APIs for component and DOM interactions
  • Global Configuration: Centralized config object for setting up global test environment
  • Type Safety: Full TypeScript support with generic type preservation and element-specific typing
  • Plugin System: Extensible architecture allowing custom wrapper functionality

Capabilities

Component Mounting

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

function mount<T>(
  component: T,
  options?: ComponentMountingOptions<T>
): VueWrapper<ComponentPublicInstance<T>>

function shallowMount<T>(
  component: T,
  options?: ComponentMountingOptions<T>
): VueWrapper<ComponentPublicInstance<T>>

Component Mounting

Vue Component Wrapper

The VueWrapper class provides methods for interacting with mounted Vue components, including prop manipulation, event testing, and component state inspection.

class VueWrapper<T extends ComponentPublicInstance> extends BaseWrapper<Node> {
  readonly vm: T;
  props(): Record<string, any>;
  props(key: string): any;
  emitted(): Record<string, unknown[][]>;
  emitted<T = unknown[]>(eventName: string): T[];
  setData(data: Record<string, any>): Promise<void>;
  setProps(props: Record<string, any>): Promise<void>;
  setValue(value: any): Promise<void>;
  unmount(): void;
}

Vue Component Wrapper

DOM Element Wrapper

The DOMWrapper class provides methods for interacting with DOM elements, including form manipulation, attribute testing, and CSS class verification.

class DOMWrapper<T extends Node> extends BaseWrapper<T> {
  setValue(value: any): Promise<void>;
}

DOM Element Wrapper

Global Configuration

Global configuration system for setting up consistent test environments, including component stubs, global properties, and wrapper plugins.

interface Config {
  global: {
    stubs: Record<string, Component | boolean | string>;
    provide: Record<string | symbol, any>;
    components: Record<string, Component>;
    config: Partial<AppConfig>;
    directives: Record<string, Directive>;
    mixins: ComponentOptions[];
    mocks: Record<string, any>;
    plugins: (app: App, ...options: any[]) => any;
    renderStubDefaultSlot: boolean;
  };
  plugins: {
    VueWrapper: Array<(wrapper: VueWrapper<any>) => void>;
    DOMWrapper: Array<(wrapper: DOMWrapper<any>) => void>;
    createStubs?: (
      stubs: Record<string, any>,
      shallow: boolean
    ) => Record<string, Component>;
  };
}

const config: Config;

Global Configuration

Testing Utilities

Helper functions and utilities for common testing scenarios, including promise resolution, auto-cleanup, and server-side rendering.

function flushPromises(): Promise<void>;
function enableAutoUnmount(hook: (callback: () => void) => void): void;
function disableAutoUnmount(): void;
function renderToString<T>(
  component: T,
  options?: ComponentMountingOptions<T>
): Promise<string>;

Testing Utilities

Type Definitions

Core interfaces and types for component mounting and wrapper functionality.

interface ComponentMountingOptions<T> {
  props?: ComponentProps<T>;
  slots?: {
    [K in keyof ComponentSlots<T>]: 
      | string 
      | VNode 
      | Component 
      | { template: string };
  };
  global?: GlobalMountOptions;
  shallow?: boolean;
  attachTo?: Element | string;
  attrs?: Record<string, unknown>;
  data?(): Record<string, unknown>;
}

interface GlobalMountOptions {
  components?: Record<string, Component>;
  config?: Partial<AppConfig>;
  directives?: Record<string, Directive>;
  mixins?: ComponentOptions[];
  mocks?: Record<string, any>;
  plugins?: Array<Plugin | [Plugin, ...any[]]>;
  provide?: Record<string | symbol, any>;
  stubs?: Stubs;
  renderStubDefaultSlot?: boolean;
}

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

interface FindComponentSelector {
  ref?: string;
  name?: string;
}