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

new9mtju 于 2023-04-07 发布在 Vue.js

关注(0)|答案(4)|浏览(209)

我有两个组件。子组件在其值更改时会发出'input'事件，父组件使用v-model获取此值。我正在测试ChildComponent。我需要使用Vue-test-utils编写一个测试来验证它是否有效。
ParentComponent.vue:

<template>
 <div>
  <child-component v-model="search"></child-component>
  <other-component></other-component>
  ...
 </div>
</template>

ChildComponent.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>

child-component.spec.ts:

describe('ChildComponent', () => {
   let wrapper: any
   before(() => {
   wrapper = VueTestUtils.shallowMount(ChildComponent, {})
  })

   it(`Should emit 'input' event when value change`, () => {
    const rootWrapper = VueTestUtils.shallowMount(ParentComponent)
    wrapper.vm.value = 'Value'
    wrapper.findAll('input').at(0).trigger('change')
    assert.isTrue(!!rootWrapper.vm.search)
  })
})

我没有写完全相同的代码，但逻辑是这样的。我的组件工作正常。'child-component.spec.ts'不工作。我需要为它写一个测试。

vue.js

来源：https://stackoverflow.com/questions/60089482/how-to-test-if-a-component-emits-an-event-in-vue

4条答案

按热度按时间

envsm3lx1#

这是一个测试emit的简单方法，如果有人正在寻找这个。在你的测试中描述一下。

describe('Close Button method', () => {
  it('emits return false if button is clicked', (done) => {
    wrapper.find('button').trigger('click')
    wrapper.vm.$nextTick(() => {
      wrapper.vm.closeModal() //closeModal is my method
      expect(wrapper.emitted().input[0]).toEqual([false]) //test if it changes
      done()
    })
  })
})

My vue comp

<div v-if="closeButton == true">
      <button
        @click="closeModal()"
      >
      ...
      </button>
</div>

我的 prop 在vue comp

props: {
    value: {
      type: Boolean,
      default: false
    },

我的方法在vue comp

methods: {
    closeModal() {
      this.$emit('input', !this.value)
    }
  }

赞(0）回复(0）举报 2023-04-07

b09cbbtk2#

const wrapper = mount(Component)

wrapper.vm.$emit('foo')
wrapper.vm.$emit('foo', 123)

await wrapper.vm.$nextTick() // Wait until $emits have been handled

expect(wrapper.emitted('foo')).toBeTruthy()

来源：https://v1.test-utils.vuejs.org/api/wrapper/emitted.html

赞(0）回复(0）举报 2023-04-07

py49o6xq3#

这里有一个例子可以帮助你：子组件.vue

<template>
  <div>
    <h2>{{ numbers }}</h2>
    <input v-model="number" type="number" />
    <button @click="$emit('number-added', Number(number))">
     Add new number
    </button>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    numbers: Array
  },
  data() {
    return {
      number: 0
    };
  }
};
</script>

父组件.vue

<template>
  <div>
    <ChildComponent
      :numbers="numbers"
      @number-added="numbers.push($event)"
    />
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent";
export default {
  name: "ParentComponent",
  data() {
    return {
      numbers: [1, 2, 3]
    };
  },
  components: {
    ChildComponent
  }
};
</script>

关注这篇文章：https://medium.com/fullstackio/managing-state-in-vue-js-23a0352b1c87
我希望这对你有帮助。

赞(0）回复(0）举报 2023-04-07

8dtrkrch4#

在父组件中侦听发出的事件“input”

<template>
 <div>
  <child-component @input="get_input_value" v-model="search"></child-component>
  <other-component></other-component>
  ...
 </div>
</template>

在脚本中添加get_input_value（）方法

<script>
...
methods:
get_input_value(value){
console.log(value)
}
</script>

赞(0）回复(0）举报 2023-04-07

我来回答

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

4条答案

相关问题

热门标签

最新问答