相关疑难解决方法(0)

如何在 Vue 中测试组件是否发出事件?

我有两个组件。子组件在值更改时发出“输入”事件,并且父组件通过 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)

javascript mocha.js chai vue.js vue-test-utils

7
推荐指数
1
解决办法
2万
查看次数

标签 统计

chai ×1

javascript ×1

mocha.js ×1

vue-test-utils ×1

vue.js ×1