vue-test-utils: не удалось перезаписать свойство $ route, обычно это вызвано плагином, который добавил свойство в качестве значения только для чтения - PullRequest
Новая
       35

vue-test-utils: не удалось перезаписать свойство $ route, обычно это вызвано плагином, который добавил свойство в качестве значения только для чтения

1 голос
/ 04 апреля 2019

Я посмотрел на другие ответы с этой проблемой, и это, кажется, вызвано попыткой импортировать 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, что все портит?

Ответы [ 2 ]

2 голосов
/ 06 апреля 2019

Так что это ошибка в 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 не будет исправлена, это должноисправить эту проблему

2 голосов
/ 06 апреля 2019

Я думаю, что эти документы имеют отношение к вашей ситуации:

Общие ошибки

Установка Vue Router добавляет $route и $router в качестве свойств только для чтения на прототипе Vue.

Это означает, что любые будущие тесты, которые пытаются макетировать $route или $router, будут неудачными.

Чтобы избежать этого, никогда не устанавливайте Vue Router глобально, когда вы запускаете тесты; используйте localVue, как описано выше.

Ошибка, которую вы видите, указывает, что один из ваших компонентов (и вне вашего тестового кода) устанавливает VueRouter (например, Vue.use(VueRouter)).

Чтобы устранить эту проблему, найдите установку VueRouter в пути к коду вашего компонента, включая любой их импорт, и реорганизуйте его так, чтобы импорт там не требовался. Обычно установка VueRouter существует только в main.js или ее импорте.

GitHub demo

...