mountAsChild(component, options = {}, slotDefinitions = {})

Creates a new Vue Instance which binds the Vue Component to be tested as a child. Allows to define slot elements.

Arguments

component (Component): The Vue Component to be tested.

options (Object) [optional]: All options which are passed to the new instance - see API.

slotDefintions (Object) [optional]: All definitions to create slot elements.

Example

Without options

Example Component

import { mountAsChild } from '@jasoeight/vue-testing';
import { expect } from 'chai';
import Example from './path/to/Example.vue';

describe('Example.vue', () => {
    it('extends component', () => {
        const wrapper = mountAsChild(Example);
        // expect(...);
    });
});

With options

Example Component

import { mountAsChild } from '@jasoeight/vue-testing';
import { expect } from 'chai';
import Example from './path/to/Example.vue';

describe('Example.vue', () => {
    it('mounts component with options', () => {
        const wrapper = mountAsChild(Example, {
            props: { 
                firstname: 'John',
                lastname: 'Doe'
            },
            on: {
                greet: value => { console.log(value); }
            }
        });
        // expect(...);
    });
});

With slots

The slot definitions must be an object with the name of the slot as a key. The value can be a string or an object.

  • string: The text for the slot. It will rendered in a
    element.
  • object: Must contain the key content for the slot content. Can also contain the key element to define the wrapping html container and the key option to set options to the element - see API.

See Example

results matching ""

    No results matching ""