Event Click on unit testing VUE

Question

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?

Answer 1

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);