vue-Test-utils: spöttische vue-Router und vuex im gleichen Test

Question

Ich versuche, eine Komponente zu montieren, die Vuex verwendet und erfordert route.query $

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); 

    }); 
}); 

verspottet werden, und ich bin diesen Fehler zurück

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

ich habe die geschlossene Ausgabe https://github.com/vuejs/vue-test-utils/issues/142 gefunden, die ähnlichen Fehler aufweist. Aber mein Fall ist ein bisschen anders. Wenn ich den Store oder die Mocks aus den Optionen entferne, funktioniert es gut, aber es funktioniert nicht, wenn Sie beides haben. Ist das ein Problem oder mache ich etwas falsch?

Dank

Answer 1

Sie bekommen diesen Fehler, da Sie VueRouter auf dem Vue-Konstruktor installiert haben, durch localVue.use(VueRouter) aufrufen. Dadurch wird $ route als schreibgeschützte Eigenschaft für den localVue-Konstruktor hinzugefügt.

Sie versuchen dann, $router mit mocks zu überschreiben. mocks kann $route nicht überschreiben, da es vom Vue-Router als schreibgeschützte Eigenschaft hinzugefügt wurde.

Ihr Problem zu beheben, Sie einen anderen localVue schaffen könnte, installieren Vuex und mocks dann in $route passieren verwenden:

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) 
})