vue-test-utils: 无法覆盖 $route 属性，这通常是由插件将属性添加为只读值引起的

Question

我已经查看了有关此问题的其他答案，似乎是由于尝试导入vue-router测试引起的。然而，这不是我的问题的情况。这是我的测试代码：

import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
import ListDetails from '../components/homepage/ListDetails'
import EntityList from '../components/homepage/EntityList'
import BootstrapVue from 'bootstrap-vue'
import Vuex from 'vuex'
import faker from 'faker'

const localVue = createLocalVue()

localVue.use(Vuex)
localVue.use(BootstrapVue)

describe('ListDetails.vue', () => {
    it('gets the correct page list when router list id param present', () => {
        const selected_list = {
            id: faker.random.number(),
            name: faker.lorem.words(),
            entries: []
        }

        testRouteListIdParam(selected_list)
    })
})

然后在testRouteListIdParam，我有：

function testRouteListIdParam(selected_list) {
    // just assume this sets up a mocked store properly.
    const store = setUpStore(selected_list, true)

    const $route = {
        path: `/homepage/lists/${selected_list.id}`
    }

    const wrapper = mount(ListDetails, {
        mocks: {
            $route
        },
        store,
        localVue
    })
}

一旦mount()发生，我就会收到错误消息：

[vue-test-utils]: could not overwrite property $route, this is usually caused by a plugin that has added the property as a read-only value

任何想法为什么会发生这种情况？同样，我没有在单元测试中的任何地方使用 VueRouter，所以我不确定为什么会出现错误。会不会是 BootstrapVue 或 Vuex 把事情搞砸了？

Answer 1

所以这是 vue-test-utils 的一个错误。如果你在任何地方使用 VueRouter （即使它没有在任何单元测试中使用），你也会得到上面的错误。

解决方法是在单元测试中使用 process.env.NODE_ENV 并将其设置为“test”，并且无论您在何处使用 VueRouter，都要像这样检查 process.env.NODE_ENV：

if (!process || process.env.NODE_ENV !== 'test') {
    Vue.use(VueRouter)
}

至少在 vue-test-utils 错误被修复之前，这应该可以解决这个问题

Answer 2

我认为这些文档与您的情况有关：

常见问题

安装 Vue Router在 Vue 原型上添加$route和$router作为只读属性。

这意味着任何尝试模拟$route或$router将失败的未来测试。

为避免这种情况，请不要在运行测试时全局安装 Vue Router；使用localVue上面详述的。

您看到的错误表明您的一个组件（并且在您的测试代码之外）正在安装 VueRouter（例如，Vue.use(VueRouter)）。

要解决此问题，请在您的组件代码路径中搜索 VueRouter 安装，包括它们的任何导入，并对其进行重构，以便在那里不需要导入。通常，VueRouter 的安装仅存在于main.js或其导入中。

GitHub 演示