事件点击单元测试VUE答案

【问题标题】：Event Click on unit testing VUE事件点击单元测试VUE
【发布时间】：2020-10-10 02:57:33
【问题描述】：

我的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-event 已被调度时中断：

 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

我是不是做错了什么？

【问题讨论】：

标签： vue.js vuejs2 vuetify.js vue-test-utils

【解决方案1】：

问题似乎出在您正在收听的事件名称上。没有来自v-btn 的action-btn:clicked 事件。但是，有一个click 事件。更改活动名称可以解决问题：

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

【讨论】：

【解决方案2】：

尝试像 addOne 这样模拟而不是 event

您需要模拟实际事件，而不是创建组件不知道的新事件

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

【讨论】：

它不是这样工作的，它确实将类型更改为“点击”