Hey all! I have vue/vite/ts app that uses pinia as a store with a component like this:

jsx
<template>
  <div
    v-if="state.notification.show"
    class="h-14 min-w-min text-base shadow-xl absolute bottom-5 left-5 rounded-sm z-50 bg-white"
    data-cy="notification-message"
  >
    <Error class="text-red-500 fill-current inline-block ml-4" v-if="state.notification.error" />
    <Info class="text-blue-500 fill-current inline-block ml-4 w-4 h-4" v-else />
    <div class="m-4 text-black inline-block">{{ state.notification.message }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { store } from '@/stores/store';
import Error from '@/assets/icons/error.svg';
import Info from '@/assets/icons/info.svg';

export default defineComponent({
  setup() {
    const state = store();
    return { state };
  },
  components: {
    Error,
    Info
  }
});
</script>

<style></style>

and I’m trying to mount it and do some component testing, but I feel like I’m getting nowhere, because I don’t see the component render at all. my component test looks like this:

ts

import { mount } from '@cypress/vue'
import Notification from './components/Notification.vue'
import { createPinia } from 'pinia';

it('renders a message', () => {
  mount(Notification, { 
    extensions: {
      plugins: [createPinia()]
    },
    props: {
      state: {
        notification: {
          show: true,
          error: false,
          message: 'Hello world'
        }
      }
    }
  })
    .get('div').contains('Hello world')
})

but I can’t seem to get the data inside or render the component. I have a feeling I’m not handling the pinia thing correctly, but I cannot seem to find a way to set the data inside the state. If anyone is willing to help, that would be super cool, thanks in advance 🙂

Hey. Yikes. I just saw this.

and is the

plugins

part correct? that’s totally just a guess on my side. plus I’m not sure if creating pinia inside the component test is the correct way or I should somehow use

store.ts

 where I actually create my storage. Do you have an example repo for ts vite vue pinia setup? that might give me some idea on what I am doing wrong

extensions.plugins is legacy