Testing Vue.js Components with Jest/

...

/

Custom Events

Custom Events

In this lesson, we'll see several cases for testing Custom Events.

We'll cover the following...

Custom Events

We can test at least two things in Custom Events:

  • Asserting that after an action, an event gets triggered
  • Checking what an event listener calls when it gets triggered

In the case of the MessageList.vue and Message.vue components example, that gets translated to:

  • Asserting that Message components trigger a message-clicked when a message gets clicked
  • Checking that when a message-clicked occurs, a handleMessageClick function is called in MessageList

Step 1:

First, go to Message.vue and use $emit to trigger that custom event:

<template>
  <li
    style="margin-top: 10px"
    class="message"
    @click="handleClick">
      {{message}}
  </li>
</template>
<script>
export default {
  name: "Message",
  props: ["message"],
  methods: {
    handleClick() {
      this.$emit("message-clicked", this.message)
    }
  }
};
</script>

Then, in ...