@vue/test-utils

@vue/test-utils

Version 2.4.10
Published 5 days ago
1.49 MB
2 dependencies
MIT license

Install

npm i @vue/test-utils

yarn add @vue/test-utils

pnpm add @vue/test-utils

Overview

Component testing utils for Vue 3.

Variables

variable config

const config: GlobalConfigOptions;

variable RouterLinkStub

const RouterLinkStub: any;

variable shallowMount

const shallowMount: <
    T,
    C = T extends ((...args: any) => any) | (new (...args: any) => any)
        ? T
        : T extends { props?: infer Props }
        ? DefineComponent<
              Props extends (infer PropNames)[] | readonly (infer PropNames)[]
                  ? { [key in PropNames extends string ? PropNames : string]?: any }
                  : Props
          >
        : DefineComponent,
    P extends ComponentProps<C> = ComponentProps<C>
>(
    originalComponent: T,
    options?: ComponentMountingOptions<C, P>
) => VueWrapper<any, ComponentPublicInstance<ComponentProps<C>, any>>;

Functions

function createWrapperError

createWrapperError: <T extends object>(
    wrapperType: 'DOMWrapper' | 'VueWrapper'
) => T;

function disableAutoUnmount

disableAutoUnmount: () => void;

function enableAutoUnmount

enableAutoUnmount: (hook: (callback: () => void) => void) => void;

function flushPromises

flushPromises: () => Promise<unknown>;

function mount

mount: <
    T,
    C = T extends ((...args: any) => any) | (new (...args: any) => any)
        ? T
        : T extends { props?: infer Props }
        ? DefineComponent<
              Props extends (infer PropNames)[] | readonly (infer PropNames)[]
                  ? { [key in PropNames extends string ? PropNames : string]?: any }
                  : Props
          >
        : DefineComponent,
    P extends ComponentProps<C> = ComponentProps<C>
>(
    originalComponent: T,
    options?: ComponentMountingOptions<C, P>
) => VueWrapper<
    ComponentProps<C> & ComponentData<C> & ComponentExposed<C>,
    ComponentPublicInstance<
        ComponentProps<C>,
        ComponentData<C> & ComponentExposed<C> & Omit<P, keyof ComponentProps<C>>
    >
>;

function renderToString

renderToString: <
    T,
    C = T extends ((...args: any) => any) | (new (...args: any) => any)
        ? T
        : T extends { props?: infer Props }
        ? DefineComponent<
              Props extends (infer PropNames)[] | readonly (infer PropNames)[]
                  ? { [key in PropNames extends string ? PropNames : string]?: any }
                  : Props
          >
        : DefineComponent
>(
    originalComponent: T,
    options?: ComponentMountingOptions<C> &
        Pick<RenderMountingOptions<any>, 'attachTo'>
) => Promise<string>;

Classes

class BaseWrapper

abstract class BaseWrapper<ElementType extends Node> implements WrapperLike {}

constructor

protected constructor(element: Node);

property element

readonly element: Node & {
    __vue_app__?: any;
    __vueParentComponent?: ComponentInternalInstance;
};

property isDisabled

protected isDisabled: () => boolean;

property wrapperElement

protected readonly wrapperElement: Node & {
    __vue_app__?: any;
    __vueParentComponent?: ComponentInternalInstance;
};

method attributes

attributes: { (): { [key: string]: string }; (key: string): string };

method classes

classes: { (): string[]; (className: string): boolean };

method exists

exists: () => boolean;

method find

find: {
    <K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<
        HTMLElementTagNameMap[K]
    >;
    <K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<
        SVGElementTagNameMap[K]
    >;
    <T extends Element = Element>(selector: string): DOMWrapper<T>;
    <T extends Node = Node>(selector: string | RefSelector): DOMWrapper<T>;
};

method findAll

abstract findAll: {
    <K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<
        HTMLElementTagNameMap[K]
    >[];
    <K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<
        SVGElementTagNameMap[K]
    >[];
    <T extends Element>(selector: string): DOMWrapper<T>[];
    (selector: string): DOMWrapper<Element>[];
};

method findAllComponents

findAllComponents: {
    <T extends never>(selector: string): WrapperLike[];
    <T extends DefinedComponent>(selector: T): VueWrapper<
        InstanceType<T>,
        any
    >[];
    <T extends FunctionalComponent<any>>(selector: T): DOMWrapper<Node>[];
    <T extends FunctionalComponent<any>>(
        selector: string
    ): DOMWrapper<Element>[];
    <T extends never>(selector: NameSelector): VueWrapper<unknown, any>[];
    <T extends ComponentPublicInstance>(selector: any): VueWrapper<T, any>[];
    <T extends never>(selector: any): WrapperLike[];
};

method findAllDOMElements

protected findAllDOMElements: (selector: string) => Element[];

method findComponent

findComponent: {
    <T extends never>(selector: string): WrapperLike;
    <
        Props,
        RawBindings = any,
        D = any,
        C extends ComputedOptions = ComputedOptions,
        M extends MethodOptions = MethodOptions
    >(
        selector: ComponentOptions<Props, RawBindings, D, C, M>
    ): VueWrapper<
        CreateComponentPublicInstance<Props, RawBindings, D, C, M>,
        any
    >;
    <T extends ComponentOptions>(selector: string): VueWrapper<
        T extends ComponentOptions<
            infer Props,
            infer RawBindings,
            infer D,
            infer C,
            infer M
        >
            ? CreateComponentPublicInstance<Props, RawBindings, D, C, M>
            : VueWrapper<CreateComponentPublicInstance, any>,
        any
    >;
    <T extends DefinedComponent>(selector: T): VueWrapper<InstanceType<T>, any>;
    <T extends FunctionalComponent<any>>(selector: T): DOMWrapper<Node>;
    <T extends FunctionalComponent<any>>(selector: string): DOMWrapper<Element>;
    <T extends never>(selector: RefSelector | NameSelector): VueWrapper<
        unknown,
        any
    >;
    <T extends ComponentPublicInstance>(selector: any): VueWrapper<T, any>;
    <T extends never>(selector: any): WrapperLike;
};

method get

get: {
    <K extends keyof HTMLElementTagNameMap>(selector: K): Omit<
        DOMWrapper<HTMLElementTagNameMap[K]>,
        'exists'
    >;
    <K extends keyof SVGElementTagNameMap>(selector: K): Omit<
        DOMWrapper<SVGElementTagNameMap[K]>,
        'exists'
    >;
    <T extends Element = Element>(selector: string): Omit<
        DOMWrapper<T>,
        'exists'
    >;
    <T extends Node = Node>(selector: string | RefSelector): Omit<
        DOMWrapper<T>,
        'exists'
    >;
};

method getComponent

getComponent: {
    <T extends never>(selector: string): Omit<WrapperLike, 'exists'>;
    <T extends DefinedComponent>(selector: T): Omit<
        VueWrapper<InstanceType<T>, any>,
        'exists'
    >;
    <T extends FunctionalComponent<any>>(selector: string | T): Omit<
        DOMWrapper<Element>,
        'exists'
    >;
    <T extends never>(selector: RefSelector | NameSelector): Omit<
        VueWrapper<unknown, any>,
        'exists'
    >;
    <T extends ComponentPublicInstance>(selector: any): Omit<
        VueWrapper<T, any>,
        'exists'
    >;
    <T extends never>(selector: any): Omit<WrapperLike, 'exists'>;
};

method getCurrentComponent

protected abstract getCurrentComponent: () => ComponentInternalInstance | void;

method getRootNodes

protected abstract getRootNodes: () => VueNode[];

method html

html: (options?: { raw?: boolean }) => string;

method isVisible

isVisible: () => boolean;

method setValue

abstract setValue: (value?: any) => Promise<void>;

method text

text: () => string;

method trigger

trigger: {
    (
        eventString: DomEventNameWithModifier,
        options?: TriggerOptions
    ): Promise<void>;
    (eventString: string, options?: TriggerOptions): Promise<void>;
};

class DOMWrapper

class DOMWrapper<NodeType extends Node> extends BaseWrapper<NodeType> {}

constructor

constructor(element: Node, subTree?: any);

property subTree

protected readonly subTree: any;

method find

find: {
    <K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<
        HTMLElementTagNameMap[K]
    >;
    <K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<
        SVGElementTagNameMap[K]
    >;
    <T extends Element = Element>(selector: string): DOMWrapper<T>;
    <T extends Node = Node>(selector: string | RefSelector): DOMWrapper<T>;
};

method findAll

findAll: {
    <K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<
        HTMLElementTagNameMap[K]
    >[];
    <K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<
        SVGElementTagNameMap[K]
    >[];
    <T extends Element>(selector: string): DOMWrapper<T>[];
};

method findAllComponents

findAllComponents: (selector: any) => any;

method getCurrentComponent

getCurrentComponent: () => import('vue').ComponentInternalInstance | undefined;

method getRootNodes

getRootNodes: () => any[];

method setValue

setValue: (value?: any) => Promise<void>;

class VueWrapper

class VueWrapper<
    VM = unknown,
    T extends ComponentPublicInstance = VM & ComponentPublicInstance
> extends BaseWrapper<Node> {}

constructor

constructor(
    app: any,
    vm: ComponentPublicInstance,
    setProps?: (props: Record<string, unknown>) => void
);

property element

readonly element: ComponentPublicInstance;

property vm

readonly vm: ComponentPublicInstance;

method emitted

emitted: {
    <T = unknown>(): Record<string, T[]>;
    <T = unknown[]>(eventName: string): T[];
};

method exists

exists: () => boolean;

method findAll

findAll: {
    <K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<
        HTMLElementTagNameMap[K]
    >[];
    <K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<
        SVGElementTagNameMap[K]
    >[];
    <T extends Element>(selector: string): DOMWrapper<T>[];
};

method getCurrentComponent

getCurrentComponent: () => any;

method getRootNodes

protected getRootNodes: () => VueNode[];

method isVisible

isVisible: () => boolean;

method props

props: {
    (): T['$props'];
    <Selector extends keyof T['$props']>(
        selector: Selector
    ): T['$props'][Selector];
};

method setData

setData: (data: Record<string, unknown>) => Promise<void>;

method setProps

setProps: (props: Partial<T['$props']>) => Promise<void>;

method setValue

setValue: (value: unknown, prop?: string) => Promise<void>;

method unmount

unmount: () => void;

Interfaces

interface MountingOptions

interface MountingOptions<Props, Data = {}>
    extends BaseMountingOptions<Props, Data> {}

Mounting options for mount and shallowMount

property attachTo

attachTo?: Element | string;

Specify where to mount the component. Can be a valid CSS selector, or an Element connected to the document.
See Also
- https://test-utils.vuejs.org/api/#attachTo

Type Aliases

type ComponentMountingOptions

type ComponentMountingOptions<
    T,
    P extends ComponentProps<T> = ComponentProps<T>
> = Omit<MountingOptions<P, ComponentData<T>>, 'slots'> & {
    slots?: {
        [K in keyof ComponentSlots<T>]?: WithArray<
            | ShimSlotReturnType<ComponentSlots<T>[K]>
            | string
            | VNode
            | (new () => any)
            | {
                  template: string;
              }
        >;
    };
} & Record<string, unknown>;

type Stubs

type Stubs = Record<string, Stub> | Array<string>;

Package Files (12)

Dependencies (2)

Peer Dependencies (3)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@vue/test-utils.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@vue/test-utils)

HTML

<a href="https://www.jsdocs.io/package/@vue/test-utils"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated just now.
Package analyzed in 4636 ms.
Missing or incorrect documentation? Open an issue for this package.

@vue/test-utils

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable config

variable RouterLinkStub

variable shallowMount

Functions

function createWrapperError

function disableAutoUnmount

function enableAutoUnmount

function flushPromises

function mount

function renderToString

Classes

class BaseWrapper

constructor

property element

property isDisabled

property wrapperElement

method attributes

method classes

method exists

method find

method findAll

method findAllComponents

method findAllDOMElements

method findComponent

method get

method getComponent

method getCurrentComponent

method getRootNodes

method html

method isVisible

method setValue

method text

method trigger

class DOMWrapper

constructor

property subTree

method find

method findAll

method findAllComponents

method getCurrentComponent

method getRootNodes

method setValue

class VueWrapper

constructor

property element

property vm

method emitted

method exists

method findAll

method getCurrentComponent

method getRootNodes

method isVisible

method props

method setData

method setProps

method setValue

method unmount

Interfaces

interface MountingOptions

property attachTo

See Also

Type Aliases

type ComponentMountingOptions

type Stubs

Package Files (12)

Dependencies (2)

Dev Dependencies (35)

Peer Dependencies (3)

Badge