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> ...
