[Vue]test-utils $route 목킹 제대로 하는 방법

에러

console.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

사용 코드

컴포넌트이름.test.js

import { shallowMount, createLocalVue } from "@vue/test-utils";
import VueRouter from "vue-router";
const localVue = createLocalVue();
const router = new VueRouter();
if (!process || process.env.NODE_ENV !== "test") {
  localVue.use(VueRouter);
}

function makeWrapper({ routeName = "" } = {}) {
  return shallowMount(ClassMaterials, {
    localVue,
    propsData: {},
    router,
    mocks: {
      $route: {
        name: routeName,
        query: {},
      },
    },
  });
}

 

테스트코드에 쓰는게 아니라, src/router/index.js 그니까, 테스트가 아니라 실제 런타임에 사용되는 Vue 인스턴스에 주입할 VueRouter를 차단해야 했던 것이다.

 

해결방법

테스트 코드에 있는 아래 코드 삭제 Vue.use(VueRouter)는 남김.

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

 

src/router/index.js에 위에 코드 추가

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