vue-test-utils: could not overwrite 属性 $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
导入测试引起的。但是,我的问题并非如此。这是我的测试代码:
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 搞砸了?
我认为这些docs与您的情况有关:
Common gotchas
Installing Vue Router adds $route
and $router
as read-only properties on Vue prototype.
This means any future tests that try to mock $route
or $router
will fail.
To avoid this, never install Vue Router globally when you're running tests; use a localVue
as detailed above.
您看到的错误表明您的组件之一(在您的测试代码之外)正在安装 VueRouter(例如,Vue.use(VueRouter)
)。
要解决此问题,请在您的组件代码路径中搜索 VueRouter 安装,包括它们的任何导入,并重构它以便在那里不需要导入。通常,VueRouter 的安装仅存在于 main.js
或其导入中。
所以这是 vue-test-utils 的一个错误。如果你正在使用 VueRouter anywhere(即使它没有在任何单元测试中使用),你也会得到上面的错误。
一个解决方法是在你的单元测试中使用 process.env.NODE_ENV 并将其设置为 'test',无论你在哪里使用 VueRouter,检查 process.env.NODE_ENV 就像这样:
if (!process || process.env.NODE_ENV !== 'test') {
Vue.use(VueRouter)
}
至少在修复 vue-test-utils 错误之前,这应该可以解决这个问题
我遇到了这个,那是因为我正在将 vueRouter
导入到 vueComponent 外部的控制器中,其中 this.$router
未定义。
import router from '@/router';
router.push('/foo')
我看了这个问题的其他答案,似乎是由于试图将 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 搞砸了?
我认为这些docs与您的情况有关:
Common gotchas
Installing Vue Router adds
$route
and$router
as read-only properties on Vue prototype.This means any future tests that try to mock
$route
or$router
will fail.To avoid this, never install Vue Router globally when you're running tests; use a
localVue
as detailed above.
您看到的错误表明您的组件之一(在您的测试代码之外)正在安装 VueRouter(例如,Vue.use(VueRouter)
)。
要解决此问题,请在您的组件代码路径中搜索 VueRouter 安装,包括它们的任何导入,并重构它以便在那里不需要导入。通常,VueRouter 的安装仅存在于 main.js
或其导入中。
所以这是 vue-test-utils 的一个错误。如果你正在使用 VueRouter anywhere(即使它没有在任何单元测试中使用),你也会得到上面的错误。
一个解决方法是在你的单元测试中使用 process.env.NODE_ENV 并将其设置为 'test',无论你在哪里使用 VueRouter,检查 process.env.NODE_ENV 就像这样:
if (!process || process.env.NODE_ENV !== 'test') {
Vue.use(VueRouter)
}
至少在修复 vue-test-utils 错误之前,这应该可以解决这个问题
我遇到了这个,那是因为我正在将 vueRouter
导入到 vueComponent 外部的控制器中,其中 this.$router
未定义。
import router from '@/router';
router.push('/foo')