spyfu-vue-factory

DEPRECATED: This package is no longer maintained, we recommend using this first party package instead.

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