CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--test-utils

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/test-utils@2.4.x
Publish Source
CLI
Badge
tessl/npm-vue--test-utils badge