我有两个组件。子组件在值更改时发出“输入”事件,并且父组件通过 v-model 获取该值。我正在测试 ChildComponent。我需要使用 Vue-test-utils 编写一个测试来验证它是否有效。
父组件.vue:
<template>
<div>
<child-component v-model="search"></child-component>
<other-component></other-component>
...
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
子组件.vue:
<template>
<input :value="value" @change="notifyChange($event.target.value)"></input>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class ChildComponent extends Vue {
@Prop({ default: '' }) readonly value!: string
notifyChange(value: string) {
this.$emit('input', value)
}
}
</script>
Run Code Online (Sandbox Code Playgroud)
子组件.spec.ts:
describe('ChildComponent', () => {
let wrapper: any
before(() => {
wrapper = VueTestUtils.shallowMount(ChildComponent, {})
})
it(`Should emit 'input' event when value change`, () => { …Run Code Online (Sandbox Code Playgroud)