CODEWITHSUNDEEP
vue.jsvuejs2vuetify.jsvue-test-utils
Leonardo Bezerra
Leonardo Bezerra

Reputation: 735

Event Click on unit testing VUE

I can't get my click-event test to work.

I'm using a Vuetify component: v-btn, but my click-event doesn't seem to dispatch. I tried using a normal button tag, but that had the same outcome. I'm new at testing, this is actually my first run, so tips and pointer are welcome.

This is my component being tested:

<template>
  <div>
    <div class="marked">
      <h2>Clicks: {{ counter }}</h2>
    </div>
    <v-btn @click="addOne" :style="buttonStyle">Counter</v-btn>
  </div>
</template>

<script>
export default {
  name: "UnitTesting",
  data() {
    return {
      counter: 0
    };
  },
  computed: {
    count() {
      return this.counter;
    },
    buttonStyle() {
      return {
        border: "solid 2px blue",
        background: "black",
        padding: "5px 12px",
        color: "white",
        borderRadius: "8px"
      };
    }
  },
  methods: {
    addOne() {
      this.counter++;
    }
  }
};
</script>

I have a simple test here to see if the component does mount, checks the content of the title, and tries to dispatch an event for the button, failing:

// Library
import Vue from "vue"
import Vuetify from "vuetify";
// Utils
import UnitTesting from "../UnitTesting.vue";
import { mount, createLocalVue } from '@vue/test-utils'

const localVue = createLocalVue()
Vue.use(Vuetify);

describe("UnitTesting.vue", () => {
  let vuetify;
  beforeEach(() => {
    vuetify = new Vuetify()
  })

  it("Testing UnitTesting Component", () => {
    const wrapper = mount(UnitTesting, {
      localVue,
      vuetify,
    });

    expect(wrapper).toBeTruthy()
  });

  it("Testing button", () => {
    const wrapper = mount(UnitTesting, {
      localVue, vuetify
    });
    const event = jest.fn();
    const button = wrapper.find(".v-btn");
    expect(button.text()).toContain("Counter")
    const title = wrapper.find(".marked");

    expect(title.text()).toContain("Clicks: 0");
    button.vm.$on("action-btn:clicked", event);
    expect(event).toHaveBeenCalledTimes(0); 
    button.trigger("click");
    expect(event).toHaveBeenCalledTimes(1); 
  })
})

As you can see, my test breaks when it expects the click-event to have been dispatched:

 FAIL  src/views/__tests__/UnitTesting.spec.js
  ● UnitTesting.vue › Testing button

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0

      37 |     expect(event).toHaveBeenCalledTimes(0);
      38 |     button.trigger("click");
    > 39 |     expect(event).toHaveBeenCalledTimes(1);
         |                   ^
      40 |   })
      41 | })

      at Object.<anonymous> (src/views/__tests__/UnitTesting.spec.js:39:19)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   0 total
Time:        2.249 s

Did I do something wrong?

Upvotes: 2

Views: 2763

Answers (2)

tony19
tony19

Reputation: 138226

The problem seems to be the event name you're listening to. There is no action-btn:clicked event from v-btn. However, there is a click event. Changing your event name resolves the issue:

//button.vm.$on("action-btn:clicked", event);  // DON'T DO THIS
button.vm.$on("click", event);

Upvotes: 1

nmanikiran
nmanikiran

Reputation: 3148

Try mocking like addOne instead of event

You need to mock the actual event instead you are creating new one which component is not aware of 

    wrapper.vm.addOne = jest.fn();
    expect(wrapper.vm.addOne).toHaveBeenCalledTimes(1);

Upvotes: 0

Related Questions