Как можно мокнуть preventDefault при vm.$emit в связке Jest и vue-test-utils?

Question

[Алексей Николаев]

Доброго дня.
Есть простецкий компонент, который выглядит как-то так.

<template>
  <v-link
    href="#"
    data-test="send-code"
    @click.prevent="onClick"
  >
    {{ label }}
  </v-link>
</template>

<script>
import VLink from '@vendor/ui/kit/VLink';

export default {
  name: 'SendCode',

  methods: {
    onClick() {
      // some stuff
      this.$emit('click');
    },
  },

  components: {
    VLink,
  },
};
</script>

Суть его в том, что при клике по ссылке эмиттится ивент "click", при этом срабатывают как внутренние механизмы компонента, так и внешний хэндлер, который в пропсах передан. Сейчас добавили условие, при котором ссылка (v-link) скрывается на 60 секунд после клика. Нужно протестировать.

Тестирование у нас через vue-test-utils + jest. Собственно, что проверяю - сперва делаю vm.$emit('click'), чтобы проверить, что при клике по ссылке вообще вызывается обработчик (который эмиттит click на уровень выше). Однако, внимание - суть задачи, тест сразу же фейлится с сообщением "TypeError: Cannot read property 'preventDefault' of undefined". Это происходит из-за модификатора "prevent".

wrapper.find('[data-test=send-code]').vm.$emit('click'); // fail! если убрать prevent, все заработает

Убирать модификатор не хотелось бы. Можно, конечно, его убрать и сделать preventDefault вручную, а в тесте передавать фейковый объект с preventDefault внутри, но это выглядит костылем, плюс не стоит подстраивать код под тесты.

Как быть? Можно ли как-то мокнуть вызовы preventDefault, лучше всего на глобальном уровне?

Comments

[Alex]

Не совсем уверен, как работают юнит тесты компонентов. Но разве не проще на смонтированном элементе вызвать нативный click?

[Алексей Николаев]

Alex, тогда не работает. Возможно потому, что это stub, а не реальный элемент. Плюс у нас почему-то везде юзается $emit. Почему не знаю, но видимо, так надо.

Answer 1

[Aetae]

По моему что-то вы делаете не так.
Имитируя клик, очевидно стоит передавать полноценный объект события, хотя-бы так:
$emit('click', new MouseEvent('click'))
События оно же не само по себе, код из события много что взять может.