vue-test-utils: mocking vue-router and vuex in the same test

Question

I'm trying to mount a component that uses Vuex and requires $route.query to be mocked

import { mount, shallow, createLocalVue } from 'vue-test-utils'
import Vue from 'vue'
import expect from 'expect'
import Vuex from 'vuex'
import VueRouter from 'vue-router'

import Post from '../../components/Post.vue'

const localVue = createLocalVue()

localVue.use(Vuex);
localVue.use(VueRouter);

describe('Lead list', () => {
    let wrapper;
    let getters;
    let store;

    beforeEach(() => {

        getters = {
            post: () => { return {} }
        }
        store = new Vuex.Store({
            getters
        });

    });


    it('should just be true', () => {

        const $route = {
            path: '/some/path',
            query: {}
        }

        wrapper = shallow(Post, {
            localVue,
            mocks: {
                $route
            }, store
        });

        expect(true).toBe(true);

    });
});

And I'm getting back this error

TypeError: Cannot set property $route of #<VueComponent> which has only a getter

I've found the closed issue https://github.com/vuejs/vue-test-utils/issues/142 that has similar error. But my case is a little different. If I remove store or mocks from the options it works fine, but it does't work when you have both. Is this an issue or I'm doing something wrong?

Thanks

Edward · Accepted Answer · 2017-11-21 18:39:04Z

9

You're getting this error because you have installed VueRouter on the Vue constructor, by calling localVue.use(VueRouter). This adds $route as a read only property on the localVue constructor.

You're then trying to overwrite $router using mocks. mocks is unable to overwrite $route because it's been added as a read only property by Vue Router.

To fix your problem, you could create another localVue, install Vuex, and then use mocks to pass in $route:

it('should just be true', () => {
  const freshLocalVue = createLocalVue()
  freshLocalVue.use(Vuex)
  const $route = {
    path: '/some/path',
    query: {}
  }

  wrapper = shallow(Post, {
      localVue,
      mocks: {
          $route
      }, 
      store
  })

  expect(true).toBe(true)
})

answered Nov 21, 2017 at 18:39

Edward

5,2482 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1421641 Over a year ago

I managed to make it work by using freshLocalVue.use(VueRouter) instead of Vuex. But you definitely pointed me in the right direction. Thanks!

mcv Over a year ago

I can't get this to work. Either there's a router, and $route can't be mocked, or there's no router and I get tons of errors because the code depends on a router. I don't understand the design decision that $route can't be mocked.

r_zelazny Over a year ago

this works but without freshLocalVue.use(VueRouter) I get warnings about unknown custom element <router-link>. Anybody know how to fix this?

sceee Over a year ago

@r_zelazny regarding the unknown router-link, see the vue-test-utils docs. You can basically stub them by adding stubs: ['router-link', 'router-view'] to your shallowMount/mount properties.

Collectives™ on Stack Overflow

vue-test-utils: mocking vue-router and vuex in the same test

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related