CODEWITHSUNDEEP
javascriptvue.jsjestjsvuetify.jsvue-test-utils
techhighlands
techhighlands

Reputation: 972

vue-test-util click trigger on button not firing

I have a Vue component with a button. On a button click, a method is called. I am using Jest for unit test. I expected .trigger method from vue-test-utils to create a synthetic event on the button, but it does nothing.

I tried calling the method directly on the wrapper by calling wrapper.vm.addService() and then using console.log(wrapper.emitted()), I indeed can see an event has been triggered. So my question is why the addServiceBtn.trigger('click') does not do anything.

The console.log(wrapper.emitted()) is an empty object. The test result is failed with error message: 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()

  })
})

Upvotes: 9

Views: 17905

Answers (4)

Giorgio Tempesta
Giorgio Tempesta

Reputation: 2059

Actually there is another reason why the tests in the original code didn't work: it's the parenthesis in the function call. I have discovered that the syntax @click="addService" will lead to failing tests, while the very similar (and somehow discouraged) syntax @click="addService()" will succeed.

Example:

test('Click calls the right function', () => {
    // wrapper is declared before this test and initialized inside the beforeEach
    wrapper.vm.testFunction = jest.fn();
    const $btnDiscard = wrapper.find('.btn-discard');
    $btnDiscard.trigger('click');
    expect(wrapper.vm.testFunction).toHaveBeenCalled();
});

This test was failing with this syntax:

<button class="btn blue-empty-btn btn-discard" @click="testFunction">
  {{ sysDizVal('remove') }}
</button>

but worked with this syntax:

<button class="btn blue-empty-btn btn-discard" @click="testFunction()">
  {{ sysDizVal('remove') }}
</button>

Upvotes: 4

Despertaweb
Despertaweb

Reputation: 1820

To me it didn work, but failed firing the event when testing with vue-test-utils until I added .native

<v-btn @click.native="addToCart($event)">
      Add
</v-btn>

Upvotes: 2

McWally
McWally

Reputation: 297

the reason why it didn't work is because this.addService in <template> u're recommended to remove this and say only @click="addService($event)" or @click="addService" also would work just fine but with no event passed in

Upvotes: 1

Efrat Levitan
Efrat Levitan

Reputation: 5612

You got a little mistake in your HTML code. Your bind the @click event to your method without any this. make it:

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

Upvotes: 5

Related Questions