Wie schreibt man testen, verhöhnt die $route-Objekt in vue Komponenten

Ich bin nicht einverstanden mit der top Antwort - kann man mock $route ohne Problem.

Auf der anderen Seite die Installation von vue-router mehrere Male auf den Basis-Konstruktor wird Probleme verursachen. Es fügt $route und $router als nur-Lesen-Eigenschaften. Das macht es unmöglich, überschreiben Sie in Zukunft tests.

Gibt es zwei Möglichkeiten, dies zu erreichen mit vue-test-utils.

Spott vue-router mit der mocks-option

const $route = {
    fullPath: 'full/path'
}
const wrapper = mount(ComponentWithRouter, { 
  mocks: {
    $route
  } 
})

wrapper.vm.$route.fullPath //'full/path'

Können Sie auch installieren, Vue Router sicher, indem createLocalVue:

Der Installation von vue-router sicher in tests mit createLocalVue

const localVue = createLocalVue()
localVue.use(VueRouter)
const routes = [
 {
   path: '/',
   component: Component
 }
]
const router = new VueRouter({
 routes
})
const wrapper = mount(ComponentWithRouter, { localVue, router })
expect(wrapper.vm.$route).to.be.an('object')

InformationsquelleAutor Edd

Alle kudos an @SColvin für seine Antwort; geholfen, die Antwort zu finden in meinem Szenario, worin ich hatte eine Komponente mit einem router-link, warf Sie ein

ERROR: '[Vue warn]: Error in render function: (found in <RouterLink>)'

während unit-test, weil Vue hatte nicht geliefert wurde, mit einem router. @SColvin Antwort zu schreiben, die testen, ursprünglich geliefert von vue-cli aus

describe('Hello.vue', () =>
{
  it('should render correct contents', () =>
  {
    const Constructor = Vue.extend(Hello);
    const vm = new Constructor().$mount();
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App');
  });

zu

describe('Hello.vue', () =>
{
  it('should render correct contents', () =>
  {
    Vue.use(VueRouter);
    const router = new VueRouter({
      routes: [
        { path: '/', name: 'Hello', component: Hello },
      ],
    });
    const vm = new Vue({
      el: document.createElement('div'),
      /* eslint-disable object-shorthand */
      router: router,
      render: h => h('router-view'),
    });
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App');
  });
});

Nicht benötigen, um die übergabe von Parametern in der Ansicht, ich könnte die Vereinfachung der Komponente als Standard-Rendern, keine Notwendigkeit zu schieben und keine Notwendigkeit zu warten, nextTick. HTH jemand anderes!

InformationsquelleAutor 9swampy

Werfen Sie einen Blick auf dieses Beispiel mit vue-test-utils, wo ich bin mocking beide router und speichern.

import ArticleDetails from '@/components/ArticleDetails'
import { mount } from 'vue-test-utils'
import router from '@/router'

describe('ArticleDetails.vue', () => {
  it('should display post details', () => {
    const POST_MESSAGE = 'Header of our content!'

    const EXAMPLE_POST = {
      title: 'Title',
      date: '6 May 2016',
      content: `# ${POST_MESSAGE}`
    }

    const wrapper = mount(ArticleDetails, {
      router,

      mocks: {
        $store: {
          getters: {
            getPostById () {
              return EXAMPLE_POST
            }
          }
        }
      }
    })

    expect(wrapper.vm.$el.querySelector('h1.post-title').textContent.trim()).to.equal(EXAMPLE_POST.title)
    expect(wrapper.vm.$el.querySelector('time').textContent.trim()).to.equal(EXAMPLE_POST.date)
    expect(wrapper.vm.$el.querySelector('.post-content').innerHTML.trim()).to.equal(
      `<h1>${POST_MESSAGE}</h1>`
    )
  })
})

InformationsquelleAutor Daniel Kmak

Können Sie mock vm.$router durch Einstellung vm._routerRoot._router

Beispielsweise

var Constructor      = Vue.extend(Your_Component)
var vm               = new Constructor().$mount()
var your_mock_router = {hello:'there'}

vm.$router             = your_mock_router //An error 'setting a property that has only a getter'
vm._routerRoot._router = your_mock_router //Wow, it works!

Können Sie überprüfen Ihre source-code hier: https://github.com/vuejs/vue-router/blob/dev/dist/vue-router.js#L558

InformationsquelleAutor nhanbach

Einfachste Methode, die ich fand, ist die Verwendung localVue

import { createLocalVue, mount } from '@vue/test-utils'
import ComponentName from 'componentPath'
import Vuex from 'vuex'
import store from '@/store/store' //Add store file if any getters is accessed
import VueRouter from 'vue-router'

describe('File name', () => { 
const localVue = createLocalVue()
localVue.use(VueRouter)
const routes = [  //Can also be rreplaced with route(router.js) file
    {
        path: '/path',
        component: ComponentName,
        name: 'Route name'
    }
]
const router = new VueRouter({
    routes
})
router.push({ 
              name: 'Route name',
              params: {} 
            }) //if needed
const wrapper = mount(ComponentName, {localVue, router, store })
beforeEach(function() {      
});

    it('Method()', () => {
        wrapper.vm.methodName()
        expect(wrapper.vm.$route.path).toBe(routes[0].path)
    });
});

Hoffe, es hilft!!!

InformationsquelleAutor Bharathkumar kamal