vue-test-util триггер нажатия на кнопку не срабатывает - PullRequest
Новая
       24

vue-test-util триггер нажатия на кнопку не срабатывает

0 голосов
/ 23 ноября 2018

У меня есть компонент Vue с кнопкой.Мне нравится проверять, что метод на компоненте вызывается, когда кнопка нажата.Я использую Jest для модульного теста.Я ожидал, что метод .trigger из vue-test-utils создаст синтетическое событие для кнопки, но он ничего не делает.

Я попытался вызвать метод непосредственно в оболочке, вызвав wrapper.vm.addService(), а затем, используя console.log(wrapper.emitted()), я действительно вижу, что событие было инициировано.Поэтому мой вопрос заключается в том, почему addServiceBtn.trigger('click') ничего не делает.

console.log(wrapper.emitted()) - пустой объект.Результат теста не выполнен с сообщением об ошибке: Expected spy to have been called, but it was not called.

ServiceItem.vue 

<template>
  <v-flex xs2>
    <v-card>
      <v-card-text id="itemTitle">{{ item.title }}</v-card-text>
      <v-card-actions>
        <v-btn flat color="green" id="addServiceBtn" @click="this.addService">Add</v-btn>
      </v-card-actions>
    </v-card>
  </v-flex>
</template>

<script>
export default {
  data: () => ({
    title: ''
  }),
  props: {
    item: Object
  },
  methods: {
    addService: function (event) {
      console.log('service item')
      this.$emit('add-service')
    }
  }
}
</script>

tests.spec.js 

import { shallowMount, mount } from '@vue/test-utils'
import ServiceItem from '@/components/ServiceItem.vue'
import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

describe('ServiceItem.vue', () => {
  it('emits add-service when Add button is clicked', () => {
    const item = {
      title: 'Service'
    }

    const wrapper = mount(ServiceItem, {
      propsData: { item }
    })

    expect(wrapper.find('#addServiceBtn').exists()).toBe(true)
    const addServiceBtn = wrapper.find('#addServiceBtn')

    const spy = spyOn(wrapper.vm, 'addService')

    console.log(wrapper.emitted())
    addServiceBtn.trigger('click')
    expect(wrapper.vm.addService).toBeCalled()

  })
})

Ответы [ 2 ]

0 голосов
/ 09 августа 2019

причина, по которой это не сработало, заключается в том, что this.addService in <template> u рекомендуется удалить this и сказать, что @click="addService($event)" или @click="addService" также будет работать нормально, но без события, переданного в

0 голосов
/ 24 ноября 2018

Вы получили небольшую ошибку в своем HTML-коде.Вы связываете событие @click с вашим методом без this.сделать это: 

 <v-btn flat color="green" id="addServiceBtn" @click="addService($event)">Add</v-btn>
...