Как вызвать измененное событие с помощью тестовых утилит vue?

Я новичок в vue, и я создал router-link с VueRouter для перехода на определенную страницу.

<router-link
  @click.native="onRouteClicked(index)"
/>

Теперь мне нужно поиздеваться над этой click.native функцией. Я знаю, что есть trigger функция для компонентов vue, доступная в vue-test-utils.

Но как мне click.native с триггера?

мой onRouteClicked выглядит так

methods: {
 onRouteClicked: function (index) {
   this.routedIndex = index;
 }

}

мой тест выглядит так

const myRouteWrapper = navBar.find('[to="/myroute"]');
myRouteWrapper.trigger('click')
expect(myComp.vm.routedIndex).equal(1);

routedIndex вообще не меняется


vue.js vue-router vue-test-utils
person Prasanna    schedule 06.01.2019    source источник
comment
Вы определили функцию onRouteClicked для объекта methods? Я считаю, что это должно вызвать событие щелчка.   -  person Yom T.    schedule 06.01.2019
comment
@jom Я обновил свой вопрос. и да, onRouteClicked действительно находится внутри объекта методов   -  person Prasanna    schedule 06.01.2019
comment
TBH, я не очень знаком с vue-test-utils, но заметил, что _ 1_ ожидает 3 разные типы селекторов. В этом случае, возможно, я бы проверил, действительно ли библиотека преобразует отдельные router-link в тег привязки HTML с #/myroute в качестве атрибута href, где мы могли бы вместо этого сделать navBar.find('[href="#/myroute"]').   -  person Yom T.    schedule 06.01.2019
comment
@jom привет, я нашел проблему. Я не использовал VueRouter с localVue в своих тестах. И, следовательно, ссылка на маршрутизатор никогда не преобразовывалась в ‹a href= /›, который, в свою очередь, никогда не запускал событие щелчка. Однако на то, чтобы это выяснить, потребовалось много времени. Должен ли я ответить на свой вопрос или оставить решение в виде комментария, чтобы люди, которых беспокоит проблема, узнали о решении.   -  person Prasanna    schedule 06.01.2019
comment
Я бы сказал, ответьте на свой вопрос этим решением, люди могут найти это полезным в будущем, как и я;)   -  person Yom T.    schedule 06.01.2019

Ответы (1)


arrow_upward
1
arrow_downward

Да, так что после целого дня усилий, думаю, мне стоит задать это в качестве вопросов и ответов.

Проблема заключалась в том, что я не использовал VueRouter. Импорт VueRouter и моих маршрутов и использование их с localVue помогли мне.

import VueRouter from 'vue-router'
import { mount, createLocalVue } from '@vue/test-utils'

var localVueInstance = createLocalVue()
localVueInstance.use(VueRouter)

var router = new VueRouter({
   routes: [],
   mode: 'history'
})

И на моих тестах

var wrapper = mount(navBarComp, {
    propsData,
    localVue: localVueInstance,
    router 
});
var myRouteWrapper = wrapper.find('[href="/myroute"]');
myRouteWrapper.trigger('click')
person Prasanna    schedule 06.01.2019