Question

我有一个Vue.js2组件(MyComponent)，它呈现了一个vue2-datepicker组件。我正在尝试为MyComponent组件编写单元测试用例。具体来说，我正在尝试测试change方法。

这是MyComponent

<template>
     <div id="component">
         <date-picker
             v-model="selectedDate"
             type="date"
             :clearable="false"
             valueType="format"
             :format="momentDateFormat"
             @change="updateParent"
             lang="en"
          >
        </date-picker>
     </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';
  import DatePicker from 'vue2-datepicker';

  @Component({
      components: {
        DatePicker,
      }
   })

  export default class MyComponent extends Vue {
        momentDateFormat:string = "YYYYMMDD"
        selectedDate: string = "2020/01/23"

        updateParent(): void {
           console.log("update parent is called");
           this.$emit('input', this.selectedDate);
        }
  }

从上面的组件代码可以看出，更改日期后，应调用updateParent()。

这就是我尝试过的

import { shallowMount, createLocalVue } from "@vue/test-utils"
import DatePicker from 'vue2-datepicker'
import MyComponent from "./MyComponent.vue"

const createWrapper = () => {

        return shallowMount(MyComponent, {
              stubs: {
                 DatePicker
               }
}

describe("test MyComponent", () => {

      beforeEach(() => {
            wrapper = createWrapper();
            jest.spyOn('wrapper.vm', 'updateParent');
      })

      it("component mounts without errors", () => {
        expect(wrapper.isVueInstance).toBeTruthy()
      })

      it("component should trigger updateParent when datepicker is changed", () => {
           const datePickerComponent = wrapper.find('date-picker-stub');
           datePickerComponent.setProps({ value : "2020/01/23" });
           datePickerComponent.trigger('change');
           console.log(wrapper.emitted()); // here it displays {} 
      });

 });

运行测试时，wrapper.emitted()显示{}。这意味着updateParent()没有被触发。

所以，我的问题是如何为MyComponent事件测试change（当<date-picker>发生任何更改事件时，应该调用updateParent（）方法）

。

任何有关如何实现这一目标的指针都将受到赞赏。

测试具有vue2-datepicker的Vue组件

0 个答案: