spyfu-vue-factory

spyfu-vue-factory

Installation

This utility creates factory functions for Vue components. To get started, install through NPM or Yarn.

# install through npm
$ npm install spyfu-vue-factory

# or with yarn
$ yarn add spyfu-vue-factory

Basic usage

To create a component factory, pass any child components, routes, and vuex modules to the factory function. All three of these properties are optional.

import { factory } from 'spyfu-vue-factory';

const mount = factory({
    components: {
        'child-component': childComponent,
    },
    modules: {
        exampleVuexModule,
    },
    routes: [
        exampleRoute,
    ],
});

Once you've made your factory, you may use it to instantiate Vue components.

const vm = mount({
    template: `<div>Hello from a test component</div>`,
});

Initial Vuex state may be supplied as the second argument. This state will be deeply merged with the default Vuex state.

const vm = mount({
    template: `<div>Hello from a test component</div>`,
}, {
    moduleNamespace: {
        key: 'new value',
    },
});

Stubbing named routes

Occasionally in tests that interact with vue-router, you'll see the following error.

[vue-router] Route with name 'whatever' does not exist

This is usually caused by trying to render a <router-link> component using a named route that your test factory does not know about. To remedy this, simply pass in the route name to the routes array.

const mount = factory({
    routes: [
        'whatever',
    ],
});

Using a custom Vue constructor

Optionally, the factory can work with a sub-classed Vue constructor. To do this, provide a Vue property in your factory options.

const mount = factory({
    Vue: Vue.extend(/* ... */),
});

License

MIT

Copyright (c) 2017-present, SpyFu