Событие Щелкните по модульному тестированию VUE

Question

Я не могу заставить работать мой тест click -event.

Я использую компонент Vuetify: v-btn, но мое click -event, похоже, не отправляется. Я пробовал использовать обычный тег кнопки, но результат был тот же. Я новичок в тестировании, на самом деле это мой первый запуск, поэтому приветствуются советы и указатель.

Это мой тестируемый компонент:

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

У меня есть простой тест, чтобы посмотреть, монтируется ли компонент, проверяет содержимое заголовка и пытается отправить событие для кнопки, неудачно:

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

Как видите, мой тест прерывается, когда он ожидает click - событие, которое должно было быть отправлено:

 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

Я сделал что-то не так?

Answer 1

Проблема, похоже, в названии события, которое вы слушаете. Нет события action-btn:clicked из v-btn. Однако есть событие click. Изменение названия события решает проблему:

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

Answer 2

Попробуйте издеваться, например, addOne вместо event

Вам нужно имитировать фактическое событие, вместо этого вы создаете новое, о котором компонент не знает

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