Избегайте предупреждений vue, когда в тестах vue.js имитируют маршрутизатор

Question

Я тестирую приложение Vue.js 2, которое использует Axios для HTTP-запросов, и я высмеиваю эти запросы с помощью Moxios. В тесте также используется Avoriaz.

Страница, которую я тестирую, просто отображает список элементов и отображает некоторые кнопки, которые реализованы с использованием <router-link>

Проблема в том, что я получаю много предупреждений в своих тестах в стиле

ЖУРНАЛ ОШИБКИ: '[Vue warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент?

Моя страница, которую я хочу протестировать, выглядит так (упрощенно):

<template>
<div>
  <ul>
    <li v-for="myelement in myobject.myelements">
        {{myelement.id}}
    </li>
  </ul>
  <router-link :to="{name: 'myElementCreate'}">New element</router-link>
</div>
</template>
<script>
import myService from './my-service.js'

export default {
  name: 'my-list',
  data() {
    return {
      myobject: {
        myelements: []
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      if (this.$route.params.id) {
        myService.get(this.$route.params.id)
          .then((response) => {
            // init data from response
          })
      }
    }
  }
}
</script>

Тест выглядит так:

import Vue from 'vue'
import moxios from 'moxios'
import {shallow} from 'avoriaz'
import MyElements from '@/my-elements'

describe('My Elements', () => {
  beforeEach(() => {
    moxios.install()
  })

  afterEach(() => {
    moxios.uninstall()
  })

  it('Renders elements list', (done) => {
    moxios.stubRequest(/.*/, {
      status: 200,
      response: existingElement
    })

    // mock route to allow fetchData() to load elements
    const component = shallow(MyElements, {
      globals: {
        $route: {params: {'id': 1}}
      }
    })

    moxios.wait(() => {
      Vue.nextTick(() => {
        try {
          const myElement = component.find('ul li')
          expect(myElement[0].text()).to.equal('6035132')
        } catch (e) {
          done(e)
        }
        done()
      })
    })
  })
})

const existingElement = {
  'id': 6035132
}

Если я добавлю Vue.use(Router) и в соответствии с этим, предупреждения исчезли, но мой макси Moxios больше не будет работать. Есть идеи, как избавиться от этих предупреждений?

Answer 1

Проблема в том, что router-link не зарегистрирован как компонент.

Если вы не установите Vue Router, компонент router-link не будет зарегистрирован. Это означает, что он не может быть использован в вашем компоненте.

Чтобы это исправить, вы можете зарегистрировать компонент-заглушку router-link:

// mock component
Vue.component('router-link', {
  name: 'router-link',
  render: h => h('div')
})

const component = shallow(MyElements, {
  globals: {
    $route: {params: {'id': 1}}
  }
})