事件点击单元测试VUE

Posted 2023-02-22

【中文标题】事件点击单元测试VUE

【英文标题】：Event Click on unit testing 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

我是不是做错了什么？

【参考方案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);

【讨论】：

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