I have two ponents. Child ponent emits an 'input' event when it's value changed and parent ponent takes this value with v-model. I'm testing ChildComponent. I need to write a test with Vue-test-utils to verify it works.

ParentComponent.vue:

<template>
 <div>
  <child-ponent v-model="search"></child-ponent>
  <other-ponent></other-ponent>
  ...
 </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-ponent.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)
  })
})

I didn't write the exact same code but the logic is like this. My ponents work properly. 'child-ponent.spec.ts' doesn't work. I need to write a test for it.

I have two ponents. Child ponent emits an 'input' event when it's value changed and parent ponent takes this value with v-model. I'm testing ChildComponent. I need to write a test with Vue-test-utils to verify it works.

ParentComponent.vue:

<template>
 <div>
  <child-ponent v-model="search"></child-ponent>
  <other-ponent></other-ponent>
  ...
 </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-ponent.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)
  })
})

I didn't write the exact same code but the logic is like this. My ponents work properly. 'child-ponent.spec.ts' doesn't work. I need to write a test for it.

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

3 Answers 3

TESTED. This is a simple way of testing an emit, if someone is looking for this. in your test describe write this.

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 p

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

my props in vue p

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

my methods in vue p

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

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()

Source: https://v1.test-utils.vuejs/api/wrapper/emitted.html

in your parent ponent listen to the emitted event "input"

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

and in your script add method get_input_value()

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