Event Handling ​

Vue components interact with each other via props and by emitting events by calling $emit . In this guide, we look at how to verify events are correctly emitted using the emitted() function.

This article is also available as a short video .

The Counter component ​

Here is a simple <Counter> component. It features a button that, when clicked, increments an internal count variable and emits its value:

const Counter = {
  template: '<button @click="handleClick">Increment</button>',
  data() {
    return {
      count: 0
  methods: {
    handleClick() {
      this.count += 1
      this.$emit('increment', this.count)
}

To fully test this component, we should verify that an increment event with the latest count value is emitted.

Asserting the emitted events ​

To do so, we will rely on the emitted() method. It returns an object with all the events the component has emitted , and their arguments in an array. Let's see how it works:

test('emits an event when clicked', () => {
  const wrapper = mount(Counter)
  wrapper.find('button').trigger('click')
  wrapper.find('button').trigger('click')
  expect(wrapper.emitted()).toHaveProperty('increment')
})

If you haven't seen trigger() before, don't worry. It's used to simulate user interaction. You can learn more in Forms .

The first thing to notice is that emitted() returns an object, where each key matches an emitted event. In this case, increment .

This test should pass. We made sure we emitted an event with the appropriate name.

Asserting the arguments of the event ​

This is good - but we can do better! We need to check that we emit the right arguments when this.$emit('increment', this.count) is called.

Our next step is to assert that the event contains the count value. We do so by passing an argument to emitted() .

test('emits an event with count when clicked', () => {
  const wrapper = mount(Counter)
  wrapper.find('button').trigger('click')
  wrapper.find('button').trigger('click')
  // `emitted()` accepts an argument. It returns an array with all the
  // occurrences of `this.$emit('increment')`.
  const incrementEvent = wrapper.emitted('increment')
  // We have "clicked" twice, so the array of `increment` should
  // have two values.
  expect(incrementEvent).toHaveLength(2)
  // Assert the result of the first click.
  // Notice that the value is an array.
  expect(incrementEvent[0]).toEqual([1])
  // Then, the result of the second one.
  expect(incrementEvent[1]).toEqual([2])
})

Let's recap and break down the output of emitted() . Each of these keys contains the different values emitted during the test:

// console.log(wrapper.emitted('increment'))
  [1], // first time it is called, `count` is 1
  [2] // second time it is called, `count` is 2
]

Asserting complex events ​

Imagine that now our <Counter> component needs to emit an object with additional information. For instance, we need to tell any parent component listening to the @increment event if count is even or odd:

const Counter = {
  template: `<button @click="handleClick">Increment</button>`,
  data() {
    return {
      count: 0
  methods: {
    handleClick() {
      this.count += 1
      this.$emit('increment', {
        count: this.count,
        isEven: this.count % 2 === 0
}

As we did before, we need to trigger the click event on the <button> element. Then, we use emitted('increment') to make sure the right values are emitted.

test('emits an event with count when clicked', () => {
  const wrapper = mount(Counter)
  wrapper.find('button').trigger('click')
  wrapper.find('button').trigger('click')
  // We have "clicked" twice, so the array of `increment` should
  // have two values.
  expect(wrapper.emitted('increment')).toHaveLength(2)
  // Then, we can make sure each element of `wrapper.emitted('increment')`
  // contains an array with the expected object.
  expect(wrapper.emitted('increment')[0]).toEqual([
      count: 1,
      isEven: false
  expect(wrapper.emitted('increment')[1]).toEqual([
      count: 2,
      isEven: true