vue-test-sys: 속성 $route를 덮어쓸 수 없습니다. 이 문제는 일반적으로 속성을 읽기 전용 값으로 추가한 플러그인으로 인해 발생합니다.

vue-test-sys: 속성 $route를 덮어쓸 수 없습니다. 이 문제는 일반적으로 속성을 읽기 전용 값으로 추가한 플러그인으로 인해 발생합니다.

이 문제에 대한 다른 답변을 살펴본 결과, Import를 시도하여 발생한 것으로 보입니다.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가 일을 망칠 수 있습니까?

이것은 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-instabs의 버그가 수정될 때까지는 이 문제가 해결됩니다.

이 문서들은 당신의 상황과 관련이 있다고 생각합니다.

일반적인 곶차

Vue Router 설치 시 추가 사항$route그리고.$routerVue 프로토타입에서 읽기 전용 속성으로 사용됩니다.

이것은 미래의 어떤 시험도 조롱하려는 것을 의미합니다.$route또는$router실패합니다.

이를 방지하려면 테스트 실행 시 Vue Router를 글로벌하게 설치하지 마십시오.localVue상술한 바와 같이

이 오류는 컴포넌트 중 하나(및 테스트 코드 외)가 VueRouter를 설치하고 있음을 나타냅니다(예:Vue.use(VueRouter)).

이 문제를 해결하려면 컴포넌트 코드 경로에서 Import를 포함하여 VueRouter 설치를 검색하고 Import가 필요하지 않도록 리팩터링합니다.일반적으로 VueRouter 설치는 다음에만 존재합니다.main.js또는 그 수입품.

GitHub 데모

나는 이것을 접했다, 그리고 그것은 내가 수입하고 있었기 때문이다.vueRoutervueComponent 외부에 있는 컨트롤러에 접속합니다.this.$router정의되지 않았습니다.

import router from '@/router';
router.push('/foo')

언급URL : https://stackoverflow.com/questions/55523639/vue-test-utils-could-not-overwrite-property-route-this-is-usually-caused-by-a