Access component variables in component tests

[devjared1]

We have recently added the Vuetify plugin to our Vue3/Vite app. I have went through the documentation and added the necessary steps to wrap the components in the parent VApp component. Here is my cypress\index.js file:

import { VApp } from 'vuetify/lib/components/VApp/index.mjs';
import { h } from 'vue';
import { mount } from '@cypress/vue';

Cypress.Commands.add("mount", (component, props, args) => {
  return mount(
    { render: () => h(VApp, {}, [h(component, props)]) },
    { ...args }
  );
});

TestNavbar.vue file:

<template>
  <v-app-bar density="compact" data-cy="navbar">
    <v-app-bar-nav-icon color="grey-lighten-2" data-cy="drawer-btn" />
    <v-app-bar-title class="pl-0">
      <span data-cy="title">Test Title</span>
    </v-app-bar-title>
  </v-app-bar>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const testFoo = ref('');
</script>

<style scoped lang="sass">
</style>

TestNavbar.cy.js file

import TestNavbar from './TestNavbar.vue';
import vuetify from '../plugins/vuetify';

describe('Navbar component tests', () => {
  it.only('Default view', () => {
    cy.mount(TestNavbar, {}, {
      global: {
        plugins: [vuetify]
      }
    })
      .then(() => {
        cy.get('[data-cy="navbar"]').should('be.visible');
        cy.get('[data-cy="drawer-btn"]').should('be.visible');
        cy.get('[data-cy="title"]').should('be.visible').then((span) => {
          expect(span.text()).to.eq('Test Title');
        });
        // before Vuetify plugin
        console.log(Cypress.vueWrapper.vm.testFoo);
        // after Vuetify plugin, get the nested TestNavbar component
        console.log(Cypress.vueWrapper.getComponent(TestNavbar).vm.testFoo);
      });
  });
});

Before we added the Vuetify plugin, I was able to access component variables after mounting with Cypress.vueWrapper.vm.variableName. Now, since we have to wrap components with the VApp component in tests, Cypress.vueWrapper.vm is tied to the VApp component. I thought that doing Cypress.vueWrapper.getComponent(TestNavbar).vm.variableName would give me access but it is undefined.


Does anyone have any suggestions on anything else to try? Thanks in advance!