Блог

Главная - Вопросы по программированию - Проверка событий нажатия на маршрутизаторе-ссылка vuejs с использованием jest

Проверка событий нажатия на маршрутизаторе-ссылка vuejs с использованием jest

#javascript #vue.js #jestjs

#javascript #vue.js #jestjs

Вопрос:

 <ul>
  <router-link to="/" tag="li" active-class="active" exact><a >Home</a></router-link>
  <router-link to="/contact" tag="li" exact><a>contact</a></router-link>
  <router-link to="/other" tag="li" exact><a>other</a></router-link>
<ul/>

Test.spec.js
(я пытаюсь вызвать событие щелчка и проверить, загружен другой компонент или нет)

 await wrapper.findAll('a').at(2).trigger('click')
await wrapper.vm.$nextTick()
expect(wrapper.contains('This is other Page')).toBe(true)

но тест не выполняется

Ответ №1:

Вам не нужно выполнять тест на router-link, поведение этого вас не волнует, потому что; поведение, которое вам нужно, — это знать, что отображается. Больше нет. Вы можете выполнить тест следующим образом

  const wrapper: any = shallowMount(YourComponent, {
    stubs: ['router-link', 'router-view']
  });

expect(wrapper.html()).toContain('to="/contact"');

Еще одна вещь, которую вы можете сделать, это убедиться, что prop «to» получил именно строку «/ contact»

Для меня этого достаточно.Чтобы сохранить (…)

PD: извините за мой английский.

Комментарии:

1. Тогда как я должен проверить после нажатия на ссылку, отображается ожидаемый компонент или нет?

2. Вы выполняете модульный тест, если вам нужно знать, отображается ли после щелчка на другой странице, вам нужно выполнить интеграционный тест. Помните, что модульный тест должен тестировать только один компонент.

3. Просто для справки, в vue test utils ^ 2.2.10 теперь stubs является свойством из options.global

4. Кроме того, ваша стратегия тестирования заключается в тестировании реализации, чего я бы по возможности избегал, говоря о prop. Есть ли другой способ?