vue-test-utils: 无法覆盖 $route 属性，这通常是由插件将属性添加为只读值引起的 [英] 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

问题描述

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

I've looked at other answers with this problem, and it seems to be caused by trying to import vue-router into the test. This however, is not the case for my problem. Here is my test code:

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() 发生，我就会收到错误:

As soon as mount() happens, I get the error:

[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 把事情搞砸了?

Any ideas why this would be happening? Again, I'm not using VueRouter anywhere in the unit tests, so I'm not sure why I'm getting the error. Could it be BootstrapVue or Vuex that are messing things up?

推荐答案

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

So this is a bug with vue-test-utils. If you are using VueRouter anywhere (even if it's not used in any unit test), you will get the above error.

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

A work around is to use process.env.NODE_ENV in your unit tests and set it to 'test', and wherever you're using VueRouter, check process.env.NODE_ENV like so:

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

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

at least until vue-test-utils bug is fixed, this should fix this problem

这篇关于vue-test-utils: 无法覆盖 $route 属性，这通常是由插件将属性添加为只读值引起的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！