vue-test-utils：在同一个测试中模拟 vue-router 和 vuex

Question

我正在尝试挂载一个使用 Vuex 并需要模拟 $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);

    });
});

我正在恢复这个错误

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

我发现已关闭的问题 https://github.com/vuejs/vue-test-utils/issues/142 有类似的错误。但我的情况有点不同。如果我从选项中删除商店或模拟，它工作正常，但当你同时拥有两者时它不起作用。这是问题还是我做错了什么？

谢谢

Answer 1

您收到此错误是因为您通过调用 localVue.use(VueRouter) 在 Vue 构造函数上安装了 VueRouter。这会将 $route 作为只读属性添加到 localVue 构造函数中。

然后您尝试使用 mocks 覆盖 $router。 mocks 无法覆盖 $route 因为它已被 Vue Router 添加为只读属性。

要解决你的问题，你可以创建另一个 localVue，安装 Vuex，然后使用 mocks 传入 $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)
})

vue-test-utils：在同一个测试中模拟 vue-router 和 vuex

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

unit-testing

vue.js

vue-router

vuex