Search⌘ K
AI Features
Home
Courses
Testing Vue.js Components with Jest

Testing Named Slots

Explore how to test named slots within Vue.js components using Jest. Learn to verify default slot content and custom slot rendering by writing efficient unit tests that confirm proper slot behavior in your components.

We'll cover the following...

Default Slots

The unnamed slot we used in the previous lesson is called the default slot, but we can have multiple slots by using named slots. Let’s add a header to the MessageList.vue component:

HTML
<template>
  <div>
    <header class="list-header">
      <slot name="header">
        This is a default header
      </slot>
    </header>
    <ul class="list-messages">
      <slot></slot>
    </ul>
  </div>
</template>

By using <slot name="header"> ...