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

Posted 2023-02-22

【中文标题】vue-test-utils：在同一个测试中模拟 vue-router 和 vuex

【英文标题】：vue-test-utils: mocking vue-router and vuex in the same test

【发布时间】：2018-05-04 06:43:19

【问题描述】：

我正在尝试安装一个使用 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。但我的情况有点不同。如果我从选项中删除 store 或 mocks 它可以正常工作，但是当你同时拥有两者时它就不起作用。这是一个问题还是我做错了什么？

谢谢

【参考方案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)
)

【讨论】：

我设法通过使用 freshLocalVue.use(VueRouter) 而不是 Vuex 使其工作。但你肯定给我指出了正确的方向。谢谢！

我无法让它工作。要么有一个路由器，并且 $route 不能被模拟，要么没有路由器，我得到了大量的错误，因为代码依赖于一个路由器。我不明白 $route 不能被嘲笑的设计决策。

这可行，但没有freshLocalVue.use(VueRouter) 我收到有关未知自定义元素<router-link> 的警告。有人知道如何解决这个问题吗？

@r_zelazny 关于未知的router-link，请参阅vue-test-utils docs。您基本上可以通过将 stubs: ['router-link', 'router-view'] 添加到您的 shallowMount/mount 属性来存根它们。