createLocalVueRouter

returns a VueRouter class that clears global variables it polluted in a previous import in Node.js.

Example

// inside a vue-test-utils vue unit test
// $ npx vue create unit-test-project
// $ cd unit-test-project
// $ vue add @vue/unit-mocha
// $ npm run test:unit

// Create a new unit test with the source code below.
import { expect } from 'chai'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
import createLocalVueRouter from 'createlocalvuerouter';

const routes = [
  {
    path: '/',
    name: 'root'
  },
  {
    path: '/home',
    name: 'home'
  },
  {
    path: '/options',
    name: 'options'
  },
  {
    path: '/profile',
    name: 'profile'
  }
];

describe('Vue Router', () => {
  describe('initialize a vue router instance', () => {
    it('should default to root route name', () => {
      const localVue = createLocalVue()
      const VueRouter = createLocalVueRouter();
      localVue.use(VueRouter)
      const router = new VueRouter({routes})
      const wrapper = shallowMount(HelloWorld, { localVue, router})
      const actual = wrapper.vm.$router.currentRoute.name
      const expected = 'root'
      expect(actual).to.equal(expected)
    })
    describe('when navigating', () => {
      it("should be able to access home", () => {
        const localVue = createLocalVue()
        const VueRouter = createLocalVueRouter();
        localVue.use(VueRouter)
        const router = new VueRouter({routes})
        const wrapper = shallowMount(HelloWorld, { localVue, router})
        wrapper.vm.$router.push('home')
        const actual = wrapper.vm.$router.currentRoute.name
        const expected = 'home'
        expect(actual).to.equal(expected)
      })
      it("should be able to access options from root path", () => {
        const localVue = createLocalVue()
        const VueRouter = createLocalVueRouter();
        localVue.use(VueRouter)
        const router = new VueRouter({routes})
        const wrapper = shallowMount(HelloWorld, { localVue, router})
        const currentRouteName = wrapper.vm.$router.currentRoute.name
        expect(currentRouteName).to.equal('root')
        wrapper.vm.$router.push('options')
        const actual = wrapper.vm.$router.currentRoute.name
        const expected = 'options'
        expect(actual).to.equal(expected)
      })
    })
  })
})

Unit testing

This library should be used with vue test utils to allow for independent testing of the VueRouter class in unit tests.

Similar to createLocalVue I wanted to make a createLocalVueRouter to be able to test seperate VueRouter instances across unit tests.

Try for yourself, go through the CLI commands in the source code above and replace the import statement with import VueRouter from "vue-router" and see the last unit test fail because of global variables being edited.

i.g.

// swap this import
import createLocalVueRouter from 'createlocalvuerouter';

// for this import
import VueRouter from 'vue-router';

// The last unit test will fail.

Usage

npm install createlocalvuerouter

See it out on npm here

Installation

This will allow you to locally develop the code.

Clone

Clone https://github.com/nadr0/createLocalVueRouter to your machine

Setup

We need to install all the dependencies for you to compile the source code into the distribution source.

npm install

Usage

source/index.js file is all the source code of the library. Import it into whatever application you want.

Code Structure

All the source for the library is in source/index.js.

Documentation

import createLocalVueRouter from 'createlocalvuerouter';
const VueRouter = createLocalVueRouter();

Contributing

Feel free, make some issues make some PRs.

Support

Reach out to me at one of the following places

• Website at kevinnadro.com

License

• MIT License