У меня есть 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
(метод updateParent () должен вызываться, когда любой событие изменения происходит в <date-picker>
).
Любые указатели на то, как я могу добиться этого, очень приветствуются.