unit-testing - vue test utils

Cómo escribir una prueba que simula el objeto $ route en componentes vue

Question

Tengo un componente que contiene una declaración como this.$route.fullPath , ¿cómo debo fullPath valor de fullPath del objeto $route si quiero probar ese componente?

Answer 1

Agregando a la gran respuesta de @SColvin, aquí hay un ejemplo de este trabajo usando Avoriaz :

import { mount } from ''avoriaz''
import Vue from ''vue''
import VueRouter from ''vue-router''
import router from ''@/router''
import HappyComponent from ''@/components/HappyComponent''

Vue.use(VueRouter)

describe(''HappyComponent.vue'', () => {
  it(''renders router links'', () => {
    wrapper = mount(HappyComponent, {router})
    // Write your test
  })
})

Creo que esto debería funcionar también con vue-test-utils .

Answer 2

Eche un vistazo a este ejemplo utilizando vue-test-utils, donde me burlo tanto del enrutador como de la tienda.

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>`
    )
  })
})

Answer 3

El método más fácil que encontré es usar 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)
    });
});

¡¡¡Espero eso ayude!!!

Answer 4

Esto es lo que he estado haciendo según este artículo :

it(''renders $router.name'', () => {
    const scopedVue = Vue.extend();

    const mockRoute = {
        name: ''abc''
    };

    scopedVue.prototype.$route = mockRoute;

    const Constructor = scopedVue.extend(Component);
    const vm = new Constructor().$mount();
    expect(vm.$el.textContent).to.equal(''abc'');
});

Answer 5

La forma más fácil que he encontrado es burlarse de la ruta $.

it(''renders $router.name'', () => {
  const $route = {
    name: ''test name - avoriaz''
  }


 const wrapper = shallow(Component, {
    mocks: {
      $route
    }
  })
  expect(wrapper.text()).to.equal($route.name)
})

Answer 6

Lo mejor es no vue-router sino usarlo para renderizar el componente, de esa forma obtendrá un enrutador que funcione correctamente. Ejemplo:

import Vue from ''vue''
import VueRouter from ''vue-router''
import totest from ''src/components/totest''

describe(''totest.vue'', () => {
  it(''should totest renders stuff'', done => {
    Vue.use(VueRouter)
    const router = new VueRouter({routes: [
        {path: ''/totest/:id'', name: ''totest'', component: totest},
        {path: ''/wherever'', name: ''another_component'', component: {render: h => ''-''}},
    ]})
    const vm = new Vue({
      el: document.createElement(''div''),
      router: router,
      render: h => h(''router-view'')
    })
    router.push({name: ''totest'', params: {id: 123}})
    Vue.nextTick(() => {
      console.log(''html:'', vm.$el)
      expect(vm.$el.querySelector(''h2'').textContent).to.equal(''Fred Bloggs'')
      done()
    })
  })
})

Cosas a tener en cuenta:

1. Estoy usando la versión solo en tiempo de ejecución de vue, por render: h => h(''router-view'') tanto render: h => h(''router-view'') .
2. Solo estoy probando el componente totest , pero es posible que se requieran otros si están referenciados por totest por ejemplo. another_component en este ejemplo.
3. Necesita nextTick para que el HTML se haya procesado antes de poder verlo / probarlo.

Uno de los problemas es que la mayoría de los ejemplos que encontré se refieren a la versión anterior de vue-router , consulte la documentación de migraciones , por ejemplo. algunos ejemplos usan router.go() que ahora no funciona.

Answer 7

Ninguna respuesta me ayudó, así que profundizo en la documentación de vue-test-utils y encontré una respuesta funcional, por lo que necesitas importar.

import { shallowMount,createLocalVue } from ''@vue/test-utils'';
import router from ''@/router.ts'';
const localVue = createLocalVue();

Creamos una instancia de vue muestra. Mientras realiza las pruebas, debe usar shallowMount para poder proporcionar una instancia de aplicación vue y un enrutador.

describe(''Components'', () => {
  it(''renders a comment form'', () => {
    const COMMENTFORM = shallowMount(CommentForm,{
      localVue,
      router
    });
  })
})

Usted puede pasar fácilmente al enrutador y al montaje superficial, y no le da el error. Si quieres pasar la tienda utilizas:

import { shallowMount,createLocalVue } from ''@vue/test-utils'';
import router from ''@/router.ts'';
import store from ''@/store.ts'';
const localVue = createLocalVue();

Y luego pasar la tienda:

describe(''Components'', () => {
  it(''renders a comment form'', () => {
    const COMMENTFORM = shallowMount(CommentForm,{
      localVue,
      router,
      store
    });
  })
})

Esta solución resolvió los siguientes errores:

• No se puede leer la propiedad ''params'' de undefined al usar this.$route.params.id
• Elemento personalizado desconocido router-link

✔

Answer 8

No estoy de acuerdo con la respuesta principal: puedes burlarte de $route sin ningún problema.

Por otro lado, la instalación de vue-router varias veces en el constructor base le causará problemas. Agrega $route y $router como propiedades de solo lectura. Lo que hace que sea imposible sobrescribirlos en futuras pruebas.

Hay dos maneras de lograr esto con vue-test-utils .

Burlándose de vue-router con la opción de mocks

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

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

También puede instalar Vue Router de forma segura utilizando createLocalVue:

Instalar vue-router de forma segura en las pruebas con 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'')

Answer 9

Puede simularse con vm. $ Router configurando vm._routerRoot._router

Por ejemplo

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!

Puede verificar su código fuente aquí: https://github.com/vuejs/vue-router/blob/dev/dist/vue-router.js#L558

Answer 10

Todas las felicitaciones a @SColvin por su respuesta; Ayudé a encontrar una respuesta en mi escenario donde tenía un componente con un enrutador-enlace que estaba lanzando un

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

durante la prueba de unidad porque a Vue no se le había suministrado un enrutador. Usando la respuesta de @SColvin para volver a escribir la prueba originalmente suministrada por vue-cli desde

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'');
  });

a

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'');
  });
});

Sin necesidad de pasar parámetros a la vista, podría simplificar el componente como el procesamiento predeterminado, sin necesidad de empujar y sin necesidad de esperar el siguiente clic. HTH alguien más!