Testing state management with Pinia

To show how to test a component that relies on Pinia (Vue’s official global state management solution), we’ll implement and test a newsletter subscription banner.

To start with, we should create the banner template. The banner will contain a Subscribe to the newsletter call to action and a close button.

<script setup>
</script>
<template>
  <div>
  <strong>Subscribe to the newsletter</strong>
  <button>Close</button>
  </div>
</template>
<style scoped>
div {
  background-color: #c0c0c0;
  size: 100%;
  padding: 10px;
}
div button {
  float: right;
}
</style>

We can display the NewsletterBanner component in the App.vue file as follows:

<script setup>
import NewsletterBanner from './components/NewsletterBanner.vue';
</script>
<template>
  ...