Не удалось установить макеты с помощью $ route в vue-test-utils

Question

Я пытаюсь попрактиковаться в тестовых ссылках Использование Mock Router .Вот мой код.

NestedRoute.vue

<template>
<div>
    <div>Nested Route</div>
    <div class="username">
        {{ $route.params.username }}
    </div>
</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home.vue';
import NestedRoute from './views/NestedRoute.vue';

Vue.use(Router)

export const routes = [
  { path: '/', name: 'home', component: Home },
  { path: '/nested-route', name: 'nroute', component: NestedRoute }
];

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

test.spec.js

import NestedRoute from '@/views/NestedRoute.vue';
import VueRouter from 'vue-router';
import {routes} from '@/router.js'

const localVue = createLocalVue();
localVue.use(VueRouter);

describe('NestedRoute', () => {
        it('renders a username from query string', () => {
            const username = 'tom';
            const $route = {
                params: { username }
            };

            const wrapper = mount(NestedRoute, {
                mocks: {
                    $route
                }
            });

            expect(wrapper.find('.username').text()).toBe(username);
        });
});

Когда я запускаю test, возникает ошибка [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.

Я пытался сослаться на проблему 'Невозможно использовать mocksс localVue ', но я не смог решить свою проблему.Как я могу использовать макет для использования $route

Answer 1

import { mount, createLocalVue } from '@vue/test-utils'
import MyComponent from '.../../MyComponent'

describe('MyComponent', () => {
  let wrapper

  beforeEach(() => {
    const localVue = createLocalVue()
    wrapper = mount(MyComponent, {
      localVue,
      mocks: {
        $route: {
          params: {
            id: 200000
          }
        }
      }
    })
  })

  it('has $route set', () => {

  })
})

Вот как это работает для меня.

Простое, но очень важное отличие состоит в том, что импортирует routes из router.js. Каким-то образом routes, используемый в Router из router.js, импортируется в test.sepec.js, и это прерывает процесс localVue, т. Е. Просто импорт маршрутов, который используется в глобальном маршрутизаторе, в тестовой спецификации загрязняет localVue теста.

Итак, удалите

import {routes} from '@/router.js'

из test.spec.js решит эту проблему.